White space in the jumbotron on the right side in mobile view

Question

I found a lot about this, but nothing really helped me to find out where the problem is. Here's what the problematic white space looks like:

Can you tell me, where this white space is coming from?

I know the problem section is the one after the jumbotron. When I delete it, the white space is gone. Can you tell me if I'm doing something wrong with positioning / spacing or something like that?

    <!DOCTYPE html>
<html lang="de">

<head>
    <!-- Wichtige Meta Daten -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS
  ============================================================================================= -->

    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Spectral:300,400" rel="stylesheet">
    <!-- Simple Line Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
    <!-- Custom -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>

    <header>
        <!-- Start Navigation -->

        <nav class="navbar navbar-expand-md navbar-dark fixed-top hero-bg">
            <div class="container mx-auto nav-line">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggle" aria-controls="navbar-toggle" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

                <div class="collapse navbar-collapse justify-content-center text-uppercase font-alt" id="navbar-toggle">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="#texting" class="nav-link">Texting</a>
                        </li>
                        <li class="nav-item">
                            <a href="#eventkonzeption" class="nav-link">Event Konzeption</a>
                        </li>
                        <li class="nav-item">
                            <a href="#impression" class="nav-link">Impressionen</a>
                        </li>
                        <li class="nav-item">
                            <a href="#ueber" class="nav-link">Über mich</a>
                        </li>
                        <li class="nav-item">
                            <a href="#kontakt" class="nav-link">Kontakt</a>
                        </li>
                    </ul>
                    <!-- navbar-nav -->
                </div>
                <!-- navbar-collapse -->

            <!-- container -->
        </div>
        </nav>

        <!-- Ende Navigation -->
    </header>

    <!-- Header -->
    <section id="home" class="hero-bg">
    <div class="container jumbotron hero-bg">
        <div class="align-items-start row justify-content-center">

        <div class="container pt-0 pb-5">

            <hr style="background: white; justify-content-start">
                <div class="img-logo col align-self-start">
                    <img class="img-fluid d-block img-responsive" src="resources/img/logo.png" alt="Rollywood-Logo">
                </div>
                <!-- col -->
            </div>

            <!-- row -->


        </div>
        </div>
        <!-- container -->
        <hr style="background: white;">
    </section>

    <!-- Header -->


<section class="">
        <div class="container section-line">
            <div class="row align-items-start justify-content-center">
                <div class="col-lg-4">
                    <div>
                        <img class="align-self-start img-fluid d-block mx-auto img-responsive" src="resources/img/writing_03.jpg" alt="">
                    </div>
                </div>
                <div class="col-lg-8 mb-5">
                    <div>
                        <div style="text-align: center">
                            <h2 class="section-title mb-2 text-uppercase">Texting</h2>
                            <img class="mb-5" src="resources/img/linie.png" alt="">
                        </div>
                        <ul class="list-group ul-group">
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Ihnen die Worte fehlen.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Ihnen die entscheidenden Worte fehlen.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn bestehende Texte nicht begeistern.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn es um Emotionen geht.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Sie Emotionen wecken wollen.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Sie Ihre bevorstehende Ansprache sprachlos macht.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Ihre Worte tatenlos bleiben.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Sie mit Worten führen wollen.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Sie einen Grund zum Feiern haben.</li>
                            <li class="list-group-item list-group-item-action list-group-item-light"><span class="icon-pencil"></span>&nbsp &nbsp wenn Tränen fliessen und Worte helfen können.</li>
                        </ul>
                        <h4 class="mt-5 section-title2">Dann ist ROLLYWOOD für Sie da</h4>
                        <h5 class="mb-5 section-title2">weil Worte Menschen bewegen.</h5>
                        <p class="mb-5">
                            Das ausgewogene Wort im richtigen Moment kann Berge versetzen und Ihre Mitmenschen begeistern. Ob das Ihre Leser oder Ihre Zuhörer sind, Ihr Business- oder Ihr Familienumfeld ist, ob Sie was zum Feiern oder zum besinnlichen Nachdenken haben - das macht für uns hinsichtlich Anspruch und Notwendigkeit keinen Unterschied.
                        </p>
                        <div>
                            <blockquote>
                                <p class="mb-5">
                                    „Wir glauben an die Kraft des subtil gewählten Wortes. An die Wirkung und die Magie, die es in uns Menschen auslöst. Und uns bewegt.“
                                </p>
                            </blockquote>
                        </div>
                        <p>
                            mehr Info: <a href="mailto:words@rolimeyer.ch" target="_top">E-Mail</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>






    <!-- Scripts
  ============================================================================================= -->

    <!-- jQuery -->
    <script src="assets/js/jquery-3.2.1.min.js"></script>
    <!-- Popper -->
    <script src="assets/js/popper.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Custom -->
    <script src="assets/js/custom.js"></script>

</body>

</html>





/* === Allgemein ===*/


/* Schriften */

body,
p {
    font-family: 'Spectral', serif;
    line-height: 1.8;
    font-size: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-alt {
font-family: 'Montserrat', sans-serif;
text-align: center; 

}


/* Hilfsklassen */

.d-relative {
    position: relative;
}

/* === Navigation ===*/

.navbar.navbar-dark button,
.navbar.navbar-dark button:focus,
.navbar.navbar-dark .nav-link {
    color: #fff;

}

.navbar {
    background-color: #2e82b0;
}

.navbar-dark {
    background-color: #2e82b0;
}



/* === Header ===*/



.hero-bg {
    background-color: #2e82b0;
}

.img-logo {
    max-width: 80%;
    margin-left:auto;
    margin-right:auto;
}

.jumbotron{
    height: 100vh;
}

/* === Section ===*/

.section-title {
    color: #ffae00;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 0.4em;  
}

.section-title2 {
    color: #ffae00;
    letter-spacing: 0.1em;  
}

.bg-section {
    background-color: #fff;
    align-items: center;
}

.section-line {
    border-bottom: 1px solid #2e82b0;
}

section p {
    text-align: justify;
    font-size: 1em;
}




.ul-group {
    border: 1px;
    margin-left: 2rem;
}
.list-group li{
  border: 0 none;
    text-indent: -2.0em;
}






footer,
footer>p,
.footer-d
{
    background-color:#2e82b0;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 0.9em;
}

.footer-text {
    font-size: 0.8em;
}

score 1 · Answer 1 · answered Feb 27 '18 at 11:37

1

Don't adjust the margin or max-width on the .row. The .row has negative margins for a reason.

answered Feb 27 '18 at 11:37

Carol Skelly

351,302
90
710
624

WebDevBooster · Accepted Answer · 2018-02-27T11:54:58.043

1

Bootstrap rows and columns are designed to work together. If you change one of those parts with custom css you are almost certain to run into problems like in this case.

So, if you add something like this:

.row {
    max-width: 1140px;
    margin: 0 auto;
}

You are removing the negative margin that needs to be there. This results in the white space you are seeing.

So, instead of applying unnecessary custom css, you should always use native Bootstrap 4 classes to achieve what you need in your layout because Bootstrap classes allow you to do almost everything you'll ever need without touching css.

Here's an article explaining how the Bootstrap grid works behind the scenes:

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Note: Even though that article is talking about Bootstrap 3, the described principles apply to the Bootstrap 4 grid as well.

edited Feb 27 '18 at 11:54

answered Feb 27 '18 at 11:49

WebDevBooster

14,674
9
66
70

Thank you four your input. The link is very helpful. but it doesn't help, when I'm deleting the .row in my css file. I put the hole css definition in my first post maybe there is something more – Dominic Meyer Feb 27 '18 at 13:16
Are you sure this is all of your code? If yes, this might be a browser caching issue. Create a brand new HTML file, paste everything inside, save and check if the issue is still there. – WebDevBooster Feb 27 '18 at 13:39
Well, apart from the nav text starting to wrap at 768px width, I'm not seeing any other problems with your most recent code. Certainly not seeing that white space. – WebDevBooster Feb 27 '18 at 15:14
And by the way, you have a bunch of invalid `&nbsp` in there. That should be ` `. Better yet, remove all of those things and replace them with `` or `mr-4` or a combination of `mr-*` and `pr-*` to achieve the desired spacing. – WebDevBooster Feb 27 '18 at 15:21
Thank you for all your inputs! I'll try it again with a new file for .html and .css. Hopefully it works then... cheers – Dominic Meyer Feb 27 '18 at 16:18
Oh hell it was an img and a Title in the end. And now it works. But your inputs gave me the right direction :) Thanks again!!!! – Dominic Meyer Feb 27 '18 at 18:45

White space in the jumbotron on the right side in mobile view

2 Answers2