Lucas Ouwens Lucas Ouwens - 2 years ago 73
CSS Question

White bar between my nav bar and main text?

After looking on stackoverflow for really long i could not find an answer to my question, so that's why i am asking it instead!

There's a strange white part between my navigation bar and main container, which i tested by just typing a under the bar

This is my code:

body, html {
width: 100%;
height: 100%;
overflow: hidden;

body {
background-color: gray;

#wrapper {

margin: 32px 160px 0 160px;
background-color: white;
height: 90%;


#nav {
background-color: #48D1CC;
margin: 0;
padding: 0;

#nav ul li {
margin: -7px 4px 1px 0;
background-color: #48D1CC;
width: 19.5%;
height: 42px;
display: inline-block;
text-decoration: none;
text-align: center;
color: black;

#nav a {
line-height: 42px;
font-family: arial, serif;
font-size: 20px;

#nav ul li:hover {
background-color: #40E0D0;

#right {
margin: 0;
width: 15%;
height: 10px;
color: black;



<html lang="en">

<meta charset="UTF-8"/>
<meta name="description" content="A test homepage"/>
<meta name="keyword" content="This is a few test key words"/>
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" href="style.css"/>
<link rel="icon" href="favicon.ico"/>


<div id="wrapper">
<div id="nav">
<a href="index.html"><li>Home</li></a>
<a href="index.html"><li>Help</li></a>
<a href="index.html"><li>Contact</li></a>
<a href="index.html"><li>Forum</li></a>
<a href="index.html"><li>Info</li></a>
<noscript>Please enable JavaScript, you have it disabled</noscript>



I am not sure why this happens, so some help would be great to have.

Answer Source

Your ul has a 16px bottom margin

#nav ul {
  margin-bottom: 16px;

NOTE the next time you face a similar problem try using Chrome Dev Tools (prssing f12) or FireBug to analyze the elements with an unexpected behaviour

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download