css menu bar not flush

Question

I am trying to make the menu bar for my website flush against the top and side of the pages. Right now there is a slight gap at the top as well as on the left and right. I can't figure out what in my code is not allowing it to become flush. Here is what I have in my CSS. My Unorder list would basically be the Nav bar and the elements in the list (ul li) are the sections i.e Home About Us etc..

ul{
  padding:0;
  top:0;
  height:60px;
  margin:0 auto;
  padding:0;
  list-style:none;
}

ul li{
  float:left;
  width:335px;
  height:40px;
  background-color:black;
  opacity:.6;
  line-height:40px;
  text-align:center;
  font-size:30;
}

score 0 · Accepted Answer · answered Mar 13 '18 at 14:30

0

If you haven't already, try to add:

body {
  margin: 0;
}

And if you have a heading (h1, h1, etc.) inside of the menu bar, then give that heading:

h1 {
  margin: 0;
}

Both the body element and the h1 - h6 elements by default have margins in most browsers.

answered Mar 13 '18 at 14:30

rpivovar

3,150
13
41
79

worked like a charm! thanks! – dz333 Mar 13 '18 at 14:33

score 0 · Answer 2 · answered Mar 13 '18 at 14:32

0

Try

 ul{
    padding:0;
    top:0;
    height:60px;
    margin:0 auto;
    padding:0;
    list-style:none;
    position:absolute;
    top:0;
    left:0;
} 

body{
    margin-top:60px;
 }

answered Mar 13 '18 at 14:32

Alessandro.Vegna

1,262
10
19

score 0 · Answer 3 · answered Mar 13 '18 at 14:32

0

The body has a default margin in most browsers. To reset it, use this CSS:

html, body {
  margin: 0;
}

answered Mar 13 '18 at 14:32

Johannes

64,305
18
73
130

css menu bar not flush

3 Answers3