Навигационная панель «Отсутствует» или тело BGcolor «spilling» в navbar

Question

Я просто продолжал делать этот сайт, и неожиданно некоторые из моих навигационных дополнений пропадают, и я не могу точно определить ошибку. Я уже играл в детективную игру и прокомментировал некоторые вещи, которые, как я думал, вмешивался. К счастью, у меня есть оригинальная картина перед тем, как нанести винт и один за другим. Некоторые из «текста абзаца» будут «размещены» по личным причинам, и я думаю, что это не имеет значения, если только это не необходимо для устранения проблемы.

-Спасибо.

До и после картины: http://imgur.com/a/ts1FS

Код:

CSS:

body { 

background-color: #1a1a1a; 
color: #ccad00; 
line-height: 1.9; 
font-size: 19px; 

} 

p.desc{ 

text-indent: 50px; 

} 

h1 { 
font-family: courier; 
color: #ccad00; 
} 

h2 { 

font-family: courier; 
color: #ccad00; 
text-align: center; 


} 

#divtitle { 

width: 50%; 
margin:auto; 
padding-top: 50px; 
text-align: center; 
} 

h2 

{ 
font-family:courier; 
color: #99cc00; 
} 


p { 

line-height: 1.9 
text-size: 19px; 

} 


#nav { 
    list-style: none; 
    font-weight: bold; 
    margin-bottom: 10px; 
    width: 100%; 
    text-align: center; 
    background-color: #ccad00; 
    height:40px; 
} 

#nav ul { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0; 
} 
#nav li { 
    margin: 0px; 

} 
#nav li a { 
    padding: 10px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #f2f2f2; 
    background-color: #ccad00; 
    float: left 
} 
#nav li a:hover { 
    color: #0d0d0d; 
    background-color: #35af3b; 
} 

.button { 
    background-color: #ffa600; 
    border: none; 
    color: #998200; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 40px; 
    font-family: courier; 
    margin: 4px 2px; 
    -webkit-transition-duration: 0.4s; /* Safari */ 
    transition-duration: 0.4s; 
    cursor: pointer; 

    } 

.button:hover { 

background-color: white; 
color: #998200; 

} 

div#containerbttn { 
width: 800px; 
height: 100px; 
margin: auto; 
background-color: green; 
} 

ul.square{ 

list-style-type: square; 

} 

.center { 

text-align: center; 

} 

HTML:

<div id="nav"> 
    <ul> 
    <li><a href="#">Home</a> 
    </li> 
    <li><a href="#">Center</a> 
    </li> 
    <li><a href="#">Rules</a> 
    </li> 
    <li><a href="#">References</a> 
    </li> 
    <li><a href="#">Rankings</a> 
    </ul> 
</div> 

<div> 


<div id="divtitle" > 

<h1> text </h1> 

</div> --> 



<div id="containerbttn"> 

<button class="button">GET STARTED!</button> 
<button class="button">FAQ</button> 
<button class="button">RANKINGS</button> 

</div> 


<h2> Synopsis: </h2> 

<div class="center"> 

<p class="desc"> Welcome to ***!. This is a free... 

<ul class="square"> 

<li> some text </li> 
<li> some text </li> 

</ul> 

<p class="desc" > text </p> 

</div> 
</html> 

Answer 1

Ваша проблема существует потому, что вы установили высоту # nav до 40 px. Когда вы добавляете дополнение к элементу, вы делаете его большим, чем элемент ul. Это можно легко решить, обновив две строки кода.

Во-первых, удалить из CSS:

#nav{ height:40px; } 

Затем добавьте в HTML после ул но перед закрытием нав DIV:

<div style="clear:both;"></div> 

Вот jsfiddle вашей рабочей страницы: https://jsfiddle.net/8o279n5r/

И вот отличный ответ на то, что дает ясная собственность: What does the CSS rule clear: both do?