CSS - Negative Margin causing x-scroll on mobile viewport

Question

I have the following html/css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="container p-1">
        <div class="row">
            <div class="col-6" style="background-color: yellowgreen;">
                Hello 1
            </div>
            <div class="col-6" style="background-color: yellow;">
                Hello 2
            </div>
        </div>
    </div>
</body>
</html>

I always thought the negative row margin would ONLY consume the padding of the columns. And thats it.

Why does the container also need to have left/right padding of 12px in order to not cause a x-scroll on mobile viewport...

Why can't I adjust the container padding as I want to?

It's quite unclear what your intentions are. When I remove the padding on the container there is no scroll. Can u make a code snippet where the scroll is visible? That way it's easier for us to solve your problem. — Stan, Mar 18 '22 at 11:16
Generally in Bootstrap, if we mess about with margins and padding using CSS there is a great chance of confusing Bootstrap as there are a is a lot of standard CSS at work also. I recommend adding padding and margins using Bootstrap's recommended method Eg `p-*` and `m-*` in your HTML. Like this > https://getbootstrap.com/docs/4.0/utilities/spacing/ — Cutey from Cute Code, Mar 18 '22 at 12:01
@Stan If you run the code snippet you can open it in a new tab ("Full Page"). If you resize your browser to iPhone viewport for instance, the x-scroll appears. I attached a screenshot to the question. (Browser: Chrome) — lucamario, Mar 18 '22 at 14:53
@CuteCodeRob Instead of the inline style, I am using the p-1 utility class for the container now. The issue persists. If you omit the p-1 class, the container default padding of 0 12px; takes over and the x-scroll stops. — lucamario, Mar 18 '22 at 15:05

Stan · Answer 1 · 2022-03-18T20:09:40.247

The problem is caused by the row, it has negative margins. To clear the margins you can use the class m-0:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="container p-1">
        <div class='row m-0'>
            <div class="col-6" style="background-color: yellowgreen;">
                Hello 1
            </div>
            <div class="col-6" style="background-color: yellow;">
                Hello 2
            </div>
        </div>
    </div>
</body>
</html>

For more information why these negative margins are on there, look at this thread: Why does the bootstrap .row class have a default margin-left of -30px?

TLDR: When a row contains <span> elements, there is space between them. To make the first child (span) not have that spacing Bootstrap used a negative margin.

CSS - Negative Margin causing x-scroll on mobile viewport

1 Answers1