CODEWITHSUNDEEP
htmlcss
Amrit
Amrit

Reputation: 17

Navigation Bar has unnecessary spaces on the left and right sides

I've included all the CSS and HTML needed to reproduce my issue. This is my first website and I'm creating a D&D character randomizer. The code I used for my navigation bar is from my teacher. I've looked at other posts on this forum but couldn't seem to fix my issue. Thanks

Picture of the issue

/* CSS for the Menu */
#Menu {
    font-size: 25px; /* Font size of 25 px */
   }
   
   /* CSS for the Menu background */
   #Menu ul {
     list-style-type: none; /* No Bullets */
     overflow: hidden; /* No Scroll Wheel */
     background-color: rgb(77, 39, 21); /* Background colour of the Menu */
     margin-bottom: 0px; /* Margin from the top div is 0 */
     margin-top: 0px /* Margin from the top div is 0 */
   }
   
   /* CSS for Menu Edges*/
   #Menu li {
     float: left; /* Menu is floated to the Left to make it all in one line */
     border-right: 1px solid rgb(104, 99, 99); /* Left border line of 1 px separating blocks. */
     border-left: 1px solid rgb(104, 99, 99); /* Right border line of 1 px separating blocks. */
   
   }
   
   /* CSS for Menu Tabs */
   #Menu li a {
     display: block; /* Turns it into a block display */
     color: rgb(187, 180, 180); /* Background colour of Text */
     text-align: center; /* Aligns text to the middle of the block */ 
     padding: 16px 177px; /* Padding of 16px and 177 px between blocks */
     text-decoration: none; /* Makes sure there are no underlines */
   }
   
<link rel="stylesheet" type="text/css" href= "StylesheetQ.css">

<div id="Menu">
    <ul>
       <li><a class="active" href="Main Page.html">Home</li></a></li>
       <li><a href="About.html">About</li></a></li>
       <li><a href="Contacts.html">Contacts</li></a></li>
       <li><a href="Testimonials.html">Testimonials</li></a></li>
   </ul>
</div>

Upvotes: 1

Views: 748

Answers (2)

tamarin
tamarin

Reputation: 549

There's a padding on your ul.

So write padding:0; and you are good to go.

For your projects, you might be interested in using a CSS Reset like this one

Upvotes: 1

ExpressHermes
ExpressHermes

Reputation: 111

Reset you padding to 0.

#Menu { 
    font-size: 25px;
    padding: 0;
}

Upvotes: 1

Related Questions