在 CSS 中忽略容器的滚动条宽度

Question

I want to create a fixed navigation menu at the top of the page with the same width as the other containers. I can't figure out why the nav container ignores the width of the scrollbar. I don't want to permanently enable the bar and I'm afraid adding margins will look weird on different sized viewports. Here is the code:

 :root { --foreground-color: grey; } header { background-color: var(--foreground-color); } nav { background-color: grey; position: fixed; top: 0%; width: 100%; padding: 1em 0% 1em 0%; justify-content: right; display: grid; grid-template-columns: 10% 10% 10% 10%; border-bottom: solid; } .navlink { background-color: dimgrey; } body { background-image: linear-gradient(45deg, black, darkolivegreen); } .title{ margin: 50px 0px 0px 0px; text-align: center; } main { background-color: var(--foreground-color); } h2 { text-align: center; } .center-content-x{ position: fixed; right: 50%; transform: translateX(50%); }

 <header> <nav> <a class="navlink" href="index.html" name="Home">Home</a> <a class="navlink" href="about.html" name="About">About</a> <a class="navlink" href="gallery.html" name="Gallery">Gallery</a> <a class="navlink" href="contact.html" name="Contact Us">Contact Us</a> </nav> <div class="title"> <h1>Sierra Custom Doors</h1> <p>"Your Reputation Is In Our Doors"</p> </div> </header>

I know it's very sloppy but, I'm fairly new to this. Any other criticism would be appreciated.

Answer 1

I'm not sure if I understand the question correctly but try this

nav {
background-color: grey;
position: fixed;
top: 0%;
width: calc(100% - 16px); /* <----- THIS LINE */
padding: 1em 0% 1em 0%;
justify-content: right;
display: grid;
grid-template-columns: 10% 10% 10% 10%;
border-bottom: solid;}

Answer 2

Try like this:

 :root { --foreground-color: grey; } header { background-color: var(--foreground-color); } nav { background-color: grey; position: fixed; top: 0%; left:0.5em; right:0.5em; padding: 1em 0% 1em 0%; justify-content: right; display: grid; grid-template-columns: 10% 10% 10% 10%; border-bottom: solid; } .navlink { background-color: dimgrey; } body { background-image: linear-gradient(45deg, black, darkolivegreen); } .title{ margin: 50px 0px 0px 0px; text-align: center; } main { background-color: var(--foreground-color); } h2 { text-align: center; } .center-content-x{ position: fixed; right: 50%; transform: translateX(50%); }

 <header> <nav> <a class="navlink" href="index.html" name="Home">Home</a> <a class="navlink" href="about.html" name="About">About</a> <a class="navlink" href="gallery.html" name="Gallery">Gallery</a> <a class="navlink" href="contact.html" name="Contact Us">Contact Us</a> </nav> <div class="title"> <h1>Sierra Custom Doors</h1> <p>"Your Reputation Is In Our Doors"</p> </div> </header>

For the nav element, width: 100%; has been replaced with left: 0.5em; right: 0.5em; left: 0.5em; right: 0.5em; (obviously, just change the values as required).