Tons of whitespace on page for no reason-CodePudding

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.

CodePudding user response：

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

set witdth to less than 100% something like 45% is enough
set Left to 0;
use flex box instead that's will be better in fact

CodePudding user response：

Welcome to SO,

Try this!

It seems that the 50% left was adding the whitespace!

  body {
        margin: 0;
        overflow-x: hidden;
        width: 100vw
    }
    
    .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: 100vw;
    }
    
    .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: relative;
        z-index: 2;
        width: 100vw;
        height: auto;
    }
    
    .exampleImg {
        width: 32vw;
        height: auto;
    }
    
    .sticky {
        position: fixed;
        top: 0;
        width: 100vw;
    }
    
    .sticky .content {
        padding-top: 102px;
    }

<body>
    <div ></div>
    <div  id="menuBar"> The sticky bar</div>
    <div >
        <<div >
            <img  src="Images/example.png" width="300" height="200">
    </div>
    <div >
        <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>