How to prevent horizontal overflow despite proper width set?

Question

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?

Can you please add your relevant HTML to accompany your CSS? — BeerusDev, Dec 21 '21 at 19:13
Maybe it's related to the browser? I'm using firefox. Or perhaps the viewport meta tag? — zeehyt, Dec 21 '21 at 19:17
It seems to me that the overflow is coming from somewhere else, because if your navbar is the red one, then the text is centered in the screen. Use the browser tools and check the width of the elements and see which one is greater than the screen — Daniel Cruz, Dec 21 '21 at 19:19

score 3 · Accepted Answer · answered Dec 21 '21 at 19:16

3

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

<div id="navbar"></div>

answered Dec 21 '21 at 19:16

Jean Will

543
3
11

Works like a charm, thank you! – zeehyt Dec 21 '21 at 19:19
but I don't think that would work for all viewports – Zain Khan Dec 21 '21 at 19:20

How to prevent horizontal overflow despite proper width set?

1 Answers1