Matan Berkovsky Matan Berkovsky -4 years ago 52
HTML Question

my Navigation is not spanning the whole width of the page

My Nav bar isn't spanning the whole page (run the snippet code to see). As you can see, there are white borders on the left and right side. Here is the code:



nav {
width: 100%;
height: 100px;
text-align: center;
z-index: 30;
position: relative;
}

li {
display: inline;
font-family: "Lato";
font-size: 20px;
text-transform: uppercase;
display: inline-block;
margin: 20px 10px;
padding: 20px 25px 25px 25px;
z-index: 30;
position: relative;
}

ul {
background-color: #80DED9;
margin: 0;
padding: 0;
width: 100%;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}

.dropdown {
display: inline-block;
cursor: pointer;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
z-index: 25;
}

.dropdown-content {
visibility: hidden;
display: block;
opacity: 1;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-20em);
z-index: -100;
transition: all .5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
}


/* Links inside the dropdown */

.dropdown-content a {
color: black;
text-decoration: none;
font-size: 10px;
margin: 0px;
z-index: -250;
}

.dropdown-content li {
display: block;
margin: 40px;
padding: 0px;
z-index: -250;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
background-color: #f1f1f1;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
visibility: visible;
z-index: -10;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.5s;
}


/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover {
color: #6d9dc5;
}

.dropbtn {
padding: 35.5px 0px;
margin: -35.5px 40px;
background-color: #80DED9;
}

<head>
<title>JAM Bakery</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>

<body>
<nav>
<ul>
<div class="dropdown">
<li class="dropbtn">Products</li>
<ul class=dropdown-content>
<li><a href="cupcakes.html">Cupcakes</a></li>
<li><a href="cakes.html">Cakes</a></li>
<li><a href="bagles.html">Bagles</a>
<li>
</ul>
</div>
<li class="buttons"><a href="aboutus.html" class="btn">About Us</a></li>
<li class="buttons"><a href="contactus.html" class="btn">Contact Us</a></li>
</ul>
</nav>
</body>





Every single thing that pertains to the nav bar is set on
width: 100%
. Please help me understand why the nav bar isn't filling the whole width of the page.

Answer Source

To CSS below should prevent the white spacing around your Nav bar

body {
  margin: 0;
  padding: 0;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download