I have a problem with scrollbar appearing at wrong pixel point on my website. I narrowed problem to simple codepen structure.

html,
body {
  margin: 0;
  padding: 0;
}

.cont {
  margin: 0;
  background: #333;
}

.cont__inner {
  width: 1100px;
  margin: 0 auto;
}

@media screen and (max-width: 1170px) {
  .cont__inner {
    width: 950px;
  }
}

.cont__inner_main {
  padding: 0 45px;
}

.why {
  height: 115px;
}
<div class="cont">
  <div class="cont__inner cont__inner_main ">
    <div class="why">adssd</div>
  </div>
</div>

The problem comes when i apply height 700px to div.why. You can see that width of container is 1100px + 45px padding on both sides , so its 1190px total

I've set media screen breakpoint lower just to track when scrollbar appears. You can test yourself, it comes up at 1206px and no element overlap document width at that moment. Removing heigth 700px solves problem, but what did it even influence width ?

1 Answers

0
Community On

Simply add width: auto in &_main

&_main 
  padding: 0 $mn * 3
  width: auto