css - 960 像素以下的内容框 - 窗口外

Question

我的内容框(白框)宽度减小到 960 像素以下，文本从右侧窗口中移出。我试图找出使用检查器的方法，但在我看来，一切都按应有的方式定义。我不知道我做错了什么。

HTML 和 CSS 一起:

https://codepen.io/drol/pen/RmLaZN

#slika {
  height:70vh;
  width:100vw;
  background-color:#df1f26;
  object-fit: cover;
  overflow:hidden;
}

.imagetop {
  height:auto;
  width:100vw;
  float: left;
  object-fit: cover;
}

#crveni {
  position:relative;
  height:auto;
  width:100vw;
  background-color:#df1f26;
  padding-bottom:80px;
}

#sadrzaj {
  position:relative;
  top:-80px;
  left:20vw;
  width:510px;
  padding:35px;
  background-color:white;
  line-height:180% !important;

}

@media (max-width:960px) {
  h1 {
    color:#df1f26;
  }
  #sadrzaj {
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    width:100vw;
  }
  #crveni {
    padding-bottom:0px;
    position: absolute;
  }
  #slika {
  height:auto;
  }
  .imagetop {
  height:auto;
  width:100vw;
  object-fit: cover;
}
}

<div id="slika"><img src="https://cdn.mos.cms.futurecdn.net/FUE7XiFApEqWZQ85wYcAfM-970-80.jpg" alt="" class="imagetop"></div>
<div id="crveni"><div id="sadrzaj"><h1>Main title</h1><h3>Subtitle of this post. Subtitle of this post. Subtitle of this post. Subtitle of this post. </h3><br/><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis nulla in ornare porttitor. Nam molestie dolor euismod commodo laoreet. Nam malesuada orci ac volutpat pretium. Nam lectus ante, facilisis ac urna eget, cursus semper nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus orci, rutrum id auctor vel, convallis et lacus. Vestibulum luctus tincidunt purus pretium cursus. Vestibulum justo erat.</div></div>

Answer 1

问题是 border-box属性未在您的 CSS 中定义。

所以，内容溢出了body由于width: 100vw和 padding: 35px;计算为总宽度。

#sadrzaj {
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100vw;
    box-sizing: border-box; //added box-sizing
}

Solved JSFiddle link

Read more about box-sizing