Warum ist da ein weißer Rand?

Hey, ich habe eine Frage zu HTML.

Ich habe bis jetzt diese Navigationleiste erarbeitet, weiß jedoch nicht wieso dort ein weißer Rand ist?

Könnt ihr mir helfen?

Das ist der HTML Code:

<nav id="nav">
<ul>
<li class="current" style="white-space: nowrap;">
<a href="">Home</a>
</li>
<li style="white-space: nowrap;">
</li>
<li style="white-space: nowrap;">
<a href="">Neumöbellogistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Lager & Logistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Werkstatt</a>
</li>
<li style="white-space: nowrap;">
<a href="">Kontakte</a>
</li>
</ul>
</nav>

----------------------------------------------------------------------------------------------------------------------------------

Und das der CSS code:

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("C:\Users\liam\Desktop\CT\Headerline.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}
#nav ul {
position: relative;
z-index: 1001;
}
#nav li {
display: inline-block;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}
#nav li > ul {
display: none;
}
#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #6b7770;
top: -6px;
padding: 6px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}
#nav li:hover, #nav li.active {
top: 3px;
}
#nav li:hover a, #nav li:hover span {
background: #C1CAC5;
color: #fff;
}
#nav li.active a, #nav li.active span {
background: #C1CAC5;
color: #fff;
}
#nav li.current a {
background: #b1ddab;
color: #fff;
}

----------------------------------------------------------------------------------------------------------------------------------

Ich hoffe ihr könnt mir helfen!

CSS, HTML5
Wie bekomme ich es hin, dass es genauso wie im Bild aussieht mit css?

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         .haupt1 {
         float: none;
         display: block;
         margin-bottom: 20px;
         width: 100%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #D8D8D8;
         }
         .haupt2 {
         float: none;
         display: block;
         margin-bottom: 20px;
         width: 75%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #D8D8D8;
         }
         .haupt3 {
         float: none;
         display: block;
         margin-bottom: 20px;
         width: 50%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #D8D8D8;
         }
         .w1 {
         float: none;
         color: #BDBDBD;
         display:block;
         }
         .s1 {
         width: 65%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #0B615E;
         }
         .a1 {
         width: 20%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #FA8258;
         }
      </style>
   </head>
   <body>
   <p class="w1">100% Width</p>
      <div class="haupt1">
         <div class="s1">Section</div>
         <div class="a1">Aside</div>
      </div>
      <p class="w1">75% Width</p>
      <div class="haupt2">
         <div class="s2">Section</div>
         <div class="a2">Aside</div>
      </div>
      <p class="w1">50% Width</p>
      <div class="haupt3">
         <div class="s3">Section</div>
         <div class="a3">Aside</div>
      </div>
   </body>
</html>      
Wie bekomme ich es hin, dass es genauso wie im Bild aussieht mit css?
HTML, CSS

Was möchtest Du wissen?