Ignore scrollbar width for container in 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

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; (obviously, just change the values as required).

Answer 2

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;}