Tons of whitespace on page for no reason

April 24, 2022

I’m writing a website for a restaurant (Not commercially) and need to know why there’s so much whitespace to the right side of the page? Take a look

HTML

        <div class = "top-container"></div>
        <div class = "menuBar" id = "menuBar"> The sticky bar</div>
        <div class = "mainContent">
            <div class = "imgContent">
             <img class = "exampleImg" src = "Images/example.png" width = "300" height = "200">
        </div>
         <div class = "content">  
               <h3>Vestibulum nulla turpis, hendrerit nec sodales vitae, congue at felis. Cras auctor ac quam sed fermentum. Quisque libero est, aliquam ac lorem a, semper molestie mi. Cras suscipit eu erat eget hendrerit. 
              </h3>
          </div>
                <img src = "Images/example.png" width = "300" height = "200">
                <img src = "Images/example.png" width = "300" height = "200">
        </div>
    </body>

CSS

.top-container{
    background-color: white;
    background-image: url("images/charmlogoTrans.png");
    padding: 170px;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    position: relative;
    max-width: 100%;
}

.menuBar{
    background-color: rgb(168, 123, 81);
    padding: 30px 40px;
    text-align: left;
    z-index: 3;
}

.content{
    padding:16px;
    background-color:rgba(230,199,177,255);
    margin-left: 2%;
    margin-right: 50%;
    margin-top: 2%;
    border-radius:4px;
    position: relative;
    z-index: 1;
}

.imgContent{
    position: absolute;
    z-index: 2;
    left: 50%;
    width: 100%;
    height:auto;
}

.exampleImg{
       width: 32%;
       height:auto;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }

.sticky + .content {
    padding-top: 102px;
  }

Please excuse me for such messy code, I’m still learning how to do some things. The measurements I’m still working on a bit, but any help is appreciated! If there’s anything I’ve missed, or need to include, please let me know.

>Solution :

That’s because imgContent is taking position: absolute, left: 50% so the element will overflow the page because you also set the width of imgContent to 100% there’s 3 ways to fix this