Нижняя панель навигации Переполнение

Question

Дно моей навигационной панели слишком сильно выходит налево. Пожалуйста помоги!

Вот мой HTML:

<div id="bottem"> 

    <h4>Made by xyz 2016</h4> 
    <h5>With lots of help from Develop Academy </h5> 
    <h5><a href="info.html" id="info">More Info</a></h5> 

</div> 

Вот мой CSS:

#bottem { 
    margin-right: 10px; 
    margin-left: 10px; 
    background-color: rgba(51, 126, 198, 0.28); 
    display: inline-block; 
    width: 100%; 
} 

вот мой сайт: enter image description here

Answer 1

Используйте CSS как padding свойство в коде ниже. padding свойство используется для создания пространства вокруг его содержимого с левой стороны. Если вы хотите сгенерировать пространство со всех сторон, просто используйте только padding, например. padding:20px.

#bottem { 
 
    padding:5px 20px; /*5px = top & bottom, 20px = left & right;*/ 
 
    background-color: rgba(51, 126, 198, 0.28); 
 
}

<div id="bottem"> 
 

 
    <h4>Made by xyz 2016</h4> 
 
    <h5>With lots of help from Develop Academy </h5> 
 
    <h5><a href="info.html" id="info">More Info</a></h5> 
 

 
</div>

Answer 2

В этом случае вам нужно иметь внутренний элемент, который может быть проложенный без содействия ширине внешнего элемента.

#bottom { 
 
    background-color: rgba(51, 126, 198, 0.28); 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
#bottom-inner { 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    background-color: rgba(51, 126, 198, 0.28); 
 
}

<div id="bottom"> 
 
    <div id="bottom-inner"> 
 
    <h4>Made by xyz 2016</h4> 
 
    <h5>With lots of help from Develop Academy </h5> 
 
    <h5><a href="info.html" id="info">More Info</a></h5> 
 
    </div> 
 
</div>

Answer 3

Поскольку у вас есть ширину на 100%, ваша обивка просто делает ширину больше. Вот почему она переполнена. Вы можете избавиться от своей прокладки. Или вы можете установить ширину, используя пиксели.

Или вы можете установить ширину и дополнение с помощью px или%. Просто убедитесь, что они добавляют до 100. Читайте о блочной модели здесь:

http://www.w3schools.com/css/css_boxmodel.asp

утеплитель: 5%; ширина: 90%;

Answer 4

Удалите поля и идите!

EDIT: Используйте обивка вместо и border-box для всех элементов

*{ 
 
    box-sizing: border-box; 
 
} 
 

 
#bottem { 
 
    background-color: rgba(51, 126, 198, 0.28); 
 
    display: inline-block; 
 
    width: 100%; 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
}

<div id="bottem"> 
 

 
    <h4>Made by xyz 2016</h4> 
 
    <h5>With lots of help from Develop Academy </h5> 
 
    <h5><a href="info.html" id="info">More Info</a></h5> 
 

 
</div>

Answer 5

Это действительно легко исправить ха-ха.

У вас есть маржа слева и справа, установленная в 10 пикселей, но элементы имеют свой собственный естественный запас. Другие ответы действительно решить некоторые из этих проблем, но держать DIV по центру, лучше всего использовать

margin:0 auto; 

это будет иметь браузер устранить верхний и нижний полей и вычислить остаток, чтобы сохранить ваш DIV по центру в окне просмотра.

Кроме того, если это не решит проблему, предоставьте более подробную информацию.

Другой вопрос, который у меня есть, почему у вас есть он встроенный блок?