Strange whitespace appears on specific resolutions

Question

I'm trying to build a theme for a small project. Everything was going well, until I saw that some of the content is in the left and it can't be seen and also the page has some white edge on the right side.

I've already tried messing up with the paddings and margins that bootstrap added. I thought it might help, but it didn't.

/*reset.css*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*main.css*/
html {
    height: 100%;
}

body {
    height: 100%;
    background-color: #fff;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

hr {
    border-bottom: 1px solid #fff;
}

/*header.ejs*/

.btn-home {
    font-weight: bold;
}

.btn-home:hover {
    color: #f18a01;
    background-color: #fff;
}

.tear {
    font-size: 5rem;
}

.face-404 {
    margin-bottom: 0.75rem;
}

.vertical-center {
    margin: 0 !important;
    height:100vh;
    width:100%;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
    background-color: #f18a01;
    color: #fff;
  }
  
.vertical-center:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
  
.container {
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
                             /* reset the font property */
    font: 0.5rem/1 "Alegreya Sans";
    font-weight: bold !important;
  }

  .container-404 {
    height: 100%;
    background-image: url("img/404.png");
    background-repeat:no-repeat;
    background-size: 100% 100%;
}

/*home.ejs*/

.shrink {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    margin-left: -1rem;
    border-bottom: 3.5px solid orange !important;
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.border {
    border-bottom: 3.5px solid orange !important;
}

.logo {
    width: 10rem;
}

.bg-orange {
    background-color: #F28A00;
    color: #fff;
}

.ml-1 > span {
    font-size: 0.8rem;
}

.ml-1 > i {
    font-size: 1.1rem;
}

.bara-mica-text {
    font-size: 0.8rem;
    letter-spacing: 0.25px;
}

.margin-top-bot {
    margin: 0.2rem 0;
}

.margin-top-bot > span > a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 0.8rem;
    transition: 0.25s;
}

.margin-top-bot > span > a:hover {
    color: #ADADAD;
}

.nav-item > a {
    transition: 0.4s;
    font-weight: 700;
}

.nav-item > a:hover {
    color: #F28A00 !important;  
}

.logos-top {
    height: 5rem;
}

.home-intro {
    background-image: url("../img/home-div-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.container-home {
    padding: 15rem 0rem 27.5rem 0rem;
}

.slogan-home {
    color: #F28A00;
}

.welcome-home {
    font-size: 4.5rem;
    line-height: 4.5rem;
}

.btn1-home-custom {
    color: #fff;
    background-color: #F28A00;
    outline: none;
    border-color: #F28A00;
    border-radius: 30px;
    height: 3rem;
    width: 12rem;
    text-transform: uppercase;
    font-weight: bold;
}

.btn2-home-custom {
    color: #F28A00;
    background-color: #fff;
    border-color: #fff;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: bold;
    width: 12rem;
}

.btn1-home-custom:hover,
.btn2-home-custom:hover {
    color: #fff;
    background-color: #212529;
    outline: none;
    border-color: #F28A00;
}

.btn:focus,.btn:active {
    outline: none !important;
    box-shadow: none;
 }

.container-home-butoane-intro {
    margin-top: 2.5rem;
    margin-left: 2rem;
}

.home-intro-2 {
    background-image: url("../img/home2-div-bg.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
}

.home-intro-2:before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background: rgba(0,0,0,.75);
 }

 .home-intro-2 > .row {
    padding: 4.5rem 0;
 }

 .home-intro-2 > .row > .col-md-6 > .display-4 {
     text-align: right;
     font-weight: bold;
     padding-right: 0.75rem;
     border-right: 2px solid #fff;
 }

 .home-intro-2 > .row > .col-md-6 > .lead {
    text-align: left;
    width: 75%;
    margin-top: 0.25rem;
}

.home-intro-2 > .row > .col-md-6 > i {
    margin-left: 0.75rem;
}

.home-intro-2 > .row > .col-md-6 > i > a {
    margin-left: 0.5rem;
    text-decoration: none;
    color: #fff;
    font-family: "Roboto";
    font-weight: bold;
}

.home-suntem > .container > .row > .display-4 {
    padding-top: 2rem;
    text-align: center;
    color: #F28A00;
    font-weight: bold;
}

.home-cine-suntem {
    text-align: center;
    padding: 2rem;
}

.home-cine-suntem > a {
    display: inline-block;
    padding-bottom: 1rem;
    text-decoration: none;
    color: orange;
    font-size: 1rem;
    font-family: "Roboto";
    font-weight: bold;
}

.home-sustinem > .container > .row > .display-4 {
    text-align: center;
    font-weight: bold;
    padding-top: 2rem;
}

.home-sustinem > .container {
    background-color: #252525;
    color: #fff;
}

.home-cum-sustinem {
    text-align: center;
    color: #585858;
    padding: 2rem;
}

.home-cum-sustinem > a{
    display: inline-block;
    padding-bottom: 1rem;
    text-decoration: none;
    font-size: 1rem;
    font-family: "Roboto";
    font-weight: bold;
    color: #585858;
}

.home-services > .container > .row > .display-4 {
    padding-top: 2rem;
    text-align: center;
    color: #F28A00;
    font-weight: bold;
}

.home-services > .container > .row > .col-md-3 {
    margin: 1rem 0;
}

.home-services > .container > .row > .col-md-3 > .home-service {
    border: 2px solid #F28A00;
    text-align: center;
}

.home-services > .container > .row > .col-md-3 > .home-service > .lead {
    padding: 0 1rem;
}

.home-services > .container > .row > .col-md-3 > .home-service > h1 {
    padding: 1rem 0;
    font-weight: bold;
}

.home-services > .container > .row > .col-md-3 > .home-service > a {
    display: inline-block;
    padding-bottom: 1rem;
    text-decoration: none;
    color: orange;
    font-size: 1rem;
    font-family: "Roboto";
    font-weight: bold;
}

.home-services > .container {
    margin-bottom: 2rem;
}

.home-echipa > .container {
    background-color: #252525;
    color: #fff;
}

.eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

.home-echipa > .container > .row > .display-4 {
    text-align: center;
    font-weight: bold;
    padding: 2rem 0 2.5rem 0;
}

.home-echipa > .container > .row > .home-echipa-functie {
    font-size: 1.3rem; 
}

.home-echipa > .container > .row > .home-echipa-nume {
    font-weight: bold;
}

.home-echipa > .container > .row > .home-echipa-poza-persoana {
    width: 150px;
    height: 150px;
    margin-bottom: 2rem;
}

.home-echipa > .container > .row > .col-md-7 > .home-descriere-persoana {
    margin-top: 1rem;
    text-align: center;
    color: #585858;
    margin-bottom: 4rem;
}

.home-proiecte > .container > .row > .display-4 {
    padding-top: 2rem;
    text-align: center;
    color: #F28A00;
    font-weight: bold;
    font-size: 1.5rem;
}

.home-echipa > .container {
    background-color: #252525;
    color: #fff;
}

.proiecte-logos {
    font-size: 1.3rem;
    margin: 4rem 0;
}

.footer-div {
    font-weight: bold;
    text-align: center;
}

.navbar-footer {
    padding: 2rem 0;
}

/*bootstrap navbar activate*/
@media (min-width: 1400px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

/* responsive layout */
@media screen and (max-width: 670px) {
    .logos-top {
        height: 2.5rem;
        display: block !important;
        margin: 0 auto !important;
    }
    .fa-phone {
        margin-left: 0 !important;
    }
    .margin-top-bot .mr-5 {
        margin-right: 2rem !important;
    }
}

@media screen and (max-width: 760px) {
    .logos-top {
        height: 1.25rem;
        display: block !important;
        margin: 0 auto !important;
    }
}

/*efect scroll*/
@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:400,800" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/css.css">
    <title>doc</title>
</head>
<body>
    <header>
            <div class="container-fluid border">
                <div class="row bg-orange">
                    <div class="container-fluid">
                            <div class="ml-1 margin-top-bot float-left">
                                <i class="fas fa-phone ml-5"></i>
                                <span class="ml-1 bara-mica-text">074 444 4444</span>
                                <i class="fas fa-envelope ml-5"></i>
                                <span class="ml-1 bara-mica-text">xxx@gmail.com</span>
                            </div>
                            <div class="mr-2 margin-top-bot float-right">
                              <span class="mr-5"><a href="#" class="mr-5">Locatie</a></span>
                              <span class="mr-5"><a href="#" class="mr-5">Despre noi</a></span>
                              <span class="mr-5"><a href="#" class="mr-5">Contact</a></span>
                            </div>
                    </div>
                </div>
                <nav class="navbar navbar-expand-custom navbar-light navbar-custom">     
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                          <span class="navbar-toggler-icon"></span>
                        </button>
                      
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                          <a class="navbar-brand" href="/"><img src="./img/logo.jpg" class="logo"></a>
                          <ul class="navbar-nav mx-auto">
                            <li class="nav-item mr-2 active">
                              <a class="nav-link buton-top-home" href="/">Acasa <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item mr-2">
                              <a class="nav-link buton-top-home" href="#">Cine suntem?</a>
                            </li>
                            <li class="nav-item mr-2">
                                <a class="nav-link buton-top-home" href="#">Cum te sustinem?</a>
                            </li>
                            <li class="nav-item mr-2">
                              <a class="nav-link buton-top-home" href="#">Proiect 1</a>
                            </li>
                            <li class="nav-item mr-2">
                                <a class="nav-link buton-top-home" href="#">Proiect 2</a>
                              </li>
                              <li class="nav-item mr-2">
                                  <a class="nav-link buton-top-home" href="#">Consultanta</a>
                              </li>
                              <li class="nav-item mr-2">
                                  <a class="nav-link buton-top-home" href="#">FAQ</a>
                                </li>
                              <li class="nav-item mr-2">
                                  <a class="nav-link buton-top-home" href="#">Contact</a>
                              </li>
                          </ul>
                        </div>
                        <div>
                            <img src="./img/logos.png" class="logos-top">
                        </div>
                      </nav> 
                </div>
            </header>
<section class="home-intro">
    <div class="row">
    <div class="container container-home col-xl-9 col-11">
      <h1 class="slogan-home">slogan??</h1>
      <p class="welcome-home">Bine ai venit la <br/>BEST DAVNIC73!</p>
      <div class="container-home-butoane-intro">
      <button type="button" class="btn btn-outline-primary btn-lg btn1-home-custom">Contacteaza-ne!</button>
      <button type="button" class="btn btn-outline-primary btn-lg btn2-home-custom">Afla mai multe</button>
    </div>
  </div>
</div>
</section>
<section class="home-intro-2">
    <div class="row">
        <div class="col-md-6">
              <h1 class="display-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>  
        </div>  
        <div class="col-md-6">
            <h1 class="lead">Donec congue congue ex sit amet suscipit. Duis sit amet ex vel dolor tristique gravida ac ut purus. Mauris mi diam, rhoncus vitae massa non, vestibulum tempor magna. </h1>  
            <i class="fas fa-arrow-right"><a href="#">Mai mult...</a></i>
        </div>  
    </div>
</section>
<section class="home-suntem">
    <div class="container">
        <div class="row justify-content-center">
              <h1 class="col-md-6 display-4">
                Cine suntem?
              </h1>
        </div>
        <div class="row justify-content-center">
            <div class="home-cine-suntem col-md-8">
            <p class="lead home-descriere-persoana">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius gravida consectetur. Phasellus ac feugiat magna. Donec aliquam vulputate velit eu sodales. Etiam eu diam tincidunt, tincidunt orci ut, vestibulum nisi. Maecenas molestie mi justo, nec venenatis nulla pretium sit amet. Pellentesque nec ex in purus bibendum lacinia. Sed vel dui at nibh imperdiet viverra quis ultrices nulla. Proin tortor est, hendrerit eget posuere ullamcorper, fringilla vitae est. Nulla finibus neque elit, sed faucibus nisi imperdiet sit amet. Proin ac nisl nec enim lacinia porta a elementum eros. Curabitur porta facilisis enim non fringilla. Praesent ac convallis arcu.</p>
            <a href="#">Mai mult...</a>
        </div>
    </div>
</section>
<section class="home-sustinem">
    <div class="container">
        <div class="row justify-content-center">
              <h1 class="col-md-6 display-4">
                Cum te sustinem?
              </h1>
        </div>
        <div class="row justify-content-center">
            <div class="home-cum-sustinem col-md-8">
            <p class="lead home-descriere-persoana">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius gravida consectetur. Phasellus ac feugiat magna. Donec aliquam vulputate velit eu sodales. Etiam eu diam tincidunt, tincidunt orci ut, vestibulum nisi. Maecenas molestie mi justo, nec venenatis nulla pretium sit amet. Pellentesque nec ex in purus bibendum lacinia. Sed vel dui at nibh imperdiet viverra quis ultrices nulla. Proin tortor est, hendrerit eget posuere ullamcorper, fringilla vitae est. Nulla finibus neque elit, sed faucibus nisi imperdiet sit amet. Proin ac nisl nec enim lacinia porta a elementum eros. Curabitur porta facilisis enim non fringilla. Praesent ac convallis arcu.</p>
            <a href="#">Mai mult...</a>
        </div>
    </div>
</section>
<section class="home-services">
    <div class="container">
        <div class="row justify-content-center">
              <h1 class="col-md-6 display-4">
                Servicii oferite
              </h1>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-3 eq-height">
              <div class="home-service">
              <h1>Serviciu 1</h1>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius gravida consectetur. Phasellus ac feugiat magna. Donec aliquam vulputate velit eu sodales. Etiam eu diam tincidunt, tincidunt orci ut, vestibulum nisi. Maecenas molestie mi justo, nec venenatis nulla pretium sit amet. Pellentesque nec ex in purus bibendum lacinia. Sed vel dui at nibh imperdiet viverra quis ultrices nulla. Proin tortor est, hendrerit eget posuere ullamcorper, fringilla vitae est. Nulla finibus neque elit, sed faucibus nisi imperdiet sit amet. Proin ac nisl nec enim lacinia porta a elementum eros. Curabitur porta facilisis enim non fringilla. Praesent ac convallis arcu.</p>
              <a href="#">Mai mult...</a>
            </div>
            </div>
            <div class="col-md-3 eq-height">
                <div class="home-service">
                <h1>Serviciu 2</h1>
                <p class="lead">Nunc dignissim faucibus tellus in aliquet. Donec fringilla diam nec ipsum laoreet rhoncus. Maecenas pulvinar lobortis imperdiet. Praesent non accumsan sem, quis placerat neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam non hendrerit metus. Etiam sit amet erat rhoncus, placerat magna at, cursus arcu. Proin maximus aliquet felis. Nullam eu commodo sapien. Donec varius sem eget tristique pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget eleifend massa. Aliquam eu quam sodales, gravida diam at, ullamcorper ligula. Morbi venenatis lobortis velit sed egestas.</p>
                <a href="#">Mai mult...</a>
              </div>
            </div>
            <div class="col-md-3 eq-height">
                <div class="home-service">
                <h1>Serviciu 3</h1>
                <p class="lead">Nullam et aliquam urna. Nulla facilisi. Aliquam aliquet, ante sit amet dictum efficitur, quam nisi maximus lorem, vel tempor neque neque vel lectus. Suspendisse vel nulla dapibus, tempor lacus quis, bibendum dui. Phasellus tincidunt, ante vitae hendrerit varius, libero neque auctor dui, quis consequat purus ante eu sapien. Curabitur nisl magna, auctor vel varius sit amet, bibendum at magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla convallis faucibus mi, a elementum libero. Vivamus vitae viverra sapien. Aliquam imperdiet commodo scelerisque.</p>
                <a href="#">Mai mult...</a>
              </div>
            </div>
        </div>
    </div>
</section>
<section class="home-echipa">
    <div class="container">
        <div class="row justify-content-center">
              <h1 class="col-md-6 display-4">
                Testimoniale
              </h1>
        </div>
    <div class="row justify-content-center">
          <img src="img/user.png" class="home-echipa-poza-persoana">       
    </div>
    <div class="row justify-content-center">
          <h4 class="home-echipa-functie">CEO</h4>       
    </div>
    <div class="row justify-content-center">
        <h3 class="home-echipa-nume">Prenume Nume</h4>  
    </div>
    <div class="row justify-content-center">
        <div class="col-md-7">
        <p class="lead home-descriere-persoana">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius gravida consectetur. Phasellus ac feugiat magna. Donec aliquam vulputate velit eu sodales. Etiam eu diam tincidunt, tincidunt orci ut, vestibulum nisi. Maecenas molestie mi justo, nec venenatis nulla pretium sit amet. Pellentesque nec ex in purus bibendum lacinia. Sed vel dui at nibh imperdiet viverra quis ultrices nulla. Proin tortor est, hendrerit eget posuere ullamcorper, fringilla vitae est. Nulla finibus neque elit, sed faucibus nisi imperdiet sit amet. Proin ac nisl nec enim lacinia porta a elementum eros. Curabitur porta facilisis enim non fringilla. Praesent ac convallis arcu.</p>
      </div>
    </div>
    </div>    
</section>
<section class="home-proiecte">
    <div class="container">
       <div class="row justify-content-center">
            <h1 class="col-md-6 display-4">
                Proiecte in derulare
            </h1>
        </div>
        <div class="row proiecte-logos">
            <div class="col-md-6 text-center">
                proiect1logo
            </div>
            <div class="col-md-6 text-center">
                proiect2logo
            </div>
        </div>
    </div>
</section>
<footer>
        <nav class="navbar navbar-nav bg-orange navbar-footer">
           <div class="row footer-div">xx</div>
           <div class="row footer-div">xx</div>
       </nav>
       </footer>  
       </body>
       <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
       <script src="javascript/js.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>

Here is a screenshot of the edge I'm talking about:

So where does this whitespace come from and how can I fix this?

Answer 1

As seen in your screenshot, the issue is with the heading being too big and essentially making the page wider than the viewport.

The Solution

There are a few ways to fix this, the easiest being to change the font size using a media query.

You can also do the following as recommended by John Smith's comment:

• Apply overflow: hidden; on the container
• Apply word-break: break-all;

Answer 2

Font size on the banner are causing the white space on the right. Reduce the font size to this resolution. It will fix your issue