HTML nav bar whitespace issue

Question

I'm creating an HTML nav bar for the first time and I'm having white space issue, I fixed it only sideways(left, right) but there is still space on the top of the nav bar. Pls help to fill it.

Image of the problem - Image

This is my CSS and HTML. Run the code and open in full mode.

li.na-li {
  float: left;
  text-align: center;
  font-size: 20px;
    }

    

li.na-li a.na-a {
        display:block;
        text-decoration: none;
        color:white;
        padding: 15px;
        
    
    }
li a:hover{background-color: #00F003}   
    
ul.na-ul {
        background-color:#000000;
        position: fixed;
        top: 0;
        width: 100%;
        list-style-type: none;
        
    }   
.navbar {
        background-color: #073A00;
        width: 0%;
    }       
    
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

    
<body>

    <div class="navbar">
<ul class="na-ul">
    <li class="na-li"><a class="na-a" href="#home">Home</a></li>
    <li class="na-li"><a class="na-a" href="Services"> Services</a></li>
    <li class="na-li"><a class="na-a" href="Contact">Contact</a></li>
    <li class="na-li"><a class="na-a" href="Help">Help</a></li>
    </ul>   
</div>  
    
    
</body>
</html>

score 1 · Accepted Answer · answered Aug 21 '20 at 20:38

ul.na-ul { margin: 0 } or ul.na-ul { margin-top: 0 } if you want space at bottom of navbar.

li.na-li {
  float: left;
  text-align: center;
  font-size: 20px;
}

li.na-li a.na-a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 15px;
}

li a:hover {
  background-color: #00F003
}

ul.na-ul {
  background-color: #000000;
  position: fixed;
  top: 0;
  width: 100%;
  list-style-type: none;
  margin: 0;
}

.navbar {
  background-color: #073A00;
  width: 0%;
}

body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>


<body>

  <div class="navbar">
    <ul class="na-ul">
      <li class="na-li"><a class="na-a" href="#home">Home</a></li>
      <li class="na-li"><a class="na-a" href="Services"> Services</a></li>
      <li class="na-li"><a class="na-a" href="Contact">Contact</a></li>
      <li class="na-li"><a class="na-a" href="Help">Help</a></li>
    </ul>
  </div>


</body>

</html>

score 1 · Answer 2 · answered Aug 21 '20 at 21:04

The element has browser inherent padding & margin by default. In your case, Use

ul.na-ul {
    margin: 0; /* To remove default margin */ 
    padding: 0; /* To remove default padding */
}

or a CSS browser reset ( https://cssreset.com/ ) to deal with this.

score 0 · Answer 3 · answered Aug 21 '20 at 20:36

0

You need to get rid of the default styling of uls.

Add margin-top: 0; in the css under ul.na-ul.

answered Aug 21 '20 at 20:36

Rod911

752
5
14

score 0 · Answer 4 · answered Aug 21 '20 at 20:38

0

Try adding

body {
    margin: 0 0;
}
ul.na-ul {
    margin-top: 0;
}

See the answer below as to why there is a margin by default. How wide is the default `<body>` margin?

answered Aug 21 '20 at 20:38

Nate Levin

918
9
22

HTML nav bar whitespace issue

4 Answers4