How to prevent horizontal overflow despite proper width set?

December 21, 2021

It seems no matter how specifically I define an elements width, it will overflow the document.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
    <div id="navbar">
        <div id="navbar-options">
            <div class="navbar-option"><a class="navbar-option-link" href="/home">Home</a></div>
            <div class="navbar-option"><a class="navbar-option-link" href="/news">Newsfeed</a></div>
            <div class="navbar-option"><a class="navbar-option-link" href="/societies">Societies</a></div>
        </div>
    </div>

    <div id="title-box">
        <h1 id="title">Students Of Westminster</h1>
    </div>

</body>

* {
    margin: 0;
    padding: 0;
}

#navbar {
    width: 100vw;
    max-width: 100%;
    min-height: 2.5vw;
    display: flex;
    margin: .5rem;
}

The navbar overflowing, indicated by the horizontal scroll bar

Even with this code, my navbar will overflow the X axis, and even after scrolling till its end, I won’t see its margin set on the far right side, how do I fix this?

>Solution :

When you describe width and margin the total width will be width + margin.

If you want your element to have full viewport width including element margin, you could use calc to remove 2 * margins.

* {
    margin: 0;
    padding: 0;
}

#navbar {
    width: calc(100vw - 1rem);
    max-width: 100%;
    min-height: 2.5vw;
    display: flex;
    margin: .5rem;
    background: red;
}