How do I resize the buttons of a navigation bar and make it fit the width of the screen?

Question

Can someone please help me with my Navigation Bar? I have been trying to research how to create one myself, but the buttons seem to end up small, and the bar itself won't stretch to the entirety of the page despite the width 100% snippet. Thanks in advance.

 .navBar { width: 100% }.navBar ul { list-style-type: none; } /* Styling of buttons on the NavBar */.navBar ul a { float: left; background-color: #202020; color: #ffffff; padding-bottom: 12px; display: block; text-decoration-line:none; font-family: 'Montserrat', sans-serif; size: 20px; } /* Styling of NavBar buttons when mouse hovers over it */.navBar ul a:hover { background-color: #006633

 <div Class=navBar>Test <ul>test1</ul> <ul>test2</ul> <ul>test3</ul> </div>

Answer 1

You're looking for CSS relative units .

If you want to make an element match the total width of the screen (specific wording here) then you want to use width: 100vw; . If the element is not rendered at the left (or right) most pixel it would overflow past the screen. Using width: 100%; would have the same effect only it's relative to it's parent element, not relative to the total width of the screen.

Answer 2

It is good practice to add CSS Resets to the top of your CSS styles. Web browsers have default margins and padding which can prevent your divs from extending the full width of the screen.

Add this to the top your CSS Stylesheet.

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

This code will reset the browser default margins and padding. Your navbar should then take up the full page width when you use .navBar { width: 100%;}

For your buttons you can add more padding until you are satisfied. For example:

.navBar ul a {
  padding: 10px 30px;
}

This will give your buttons 10px padding on the top and bottom and 30px padding left and right.

As mentioned above, please select the answer that was most useful to you.