Navigation Bar Padding 'missing' or body BGcolor 'spilling' into navbar

Question

I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.

-Thanks.

Before and after picture: https://i.stack.imgur.com/BANPF.jpg

Code:

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>

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.

First, remove from css:

#nav{ height:40px; }

Then, add to html after ul but before closing the nav div:

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

Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/

And here is a great answer on what the clear property does: What does the CSS rule clear: both do?

edited May 23 '17 at 10:28

Community

1
1

answered May 06 '16 at 03:35

jbrya029

492
3
11

You're welcome. Please accept the answer as correct. Thanks! – jbrya029 May 06 '16 at 03:54
How do you do that? I hit the up button already but the number is not changing :( – Shinji-san May 06 '16 at 04:09
No problem: The check below the arrows is for accepting answers. Here is a helpful link on accepting answers: http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – jbrya029 May 06 '16 at 04:11

Navigation Bar Padding 'missing' or body BGcolor 'spilling' into navbar

1 Answers1