防止容器与其他内容重叠

Question

随着屏幕变小，中间的容器会出现在左边的顶部。

左容器：

左容器的css;

    #second-section {
    max-width:250px;
    position:fixed;
    margin-left:80px;
    margin-bottom:100px;}

中间容器：

中间容器的css;

    #post-cont{
    max-width: 700px;
    display:flex;}

编辑：这是它的外观：

Answer 1

这很糟糕。

第一件事 - 当您使用 Bootstrap 时。所以使用它关于 .container 的约定。 当你有自己的布局时，所以不要在这里使用 Bootstrap 容器，而要自己制作。例如（删除 .container 类）：

#post-cunt {
    /*...*/
    margin: auto;

其次，当 #post-count 有 max-width: 700px 时，做更好的响应计算；和 #second-section 250px（不要忘记边距...）

那么，什么时候应该隐藏 #second-section？

@media screen and (max-width: ...px?)
#second-section {
    display: none;
}

Answer 2

由于您无论如何都将其删除为 1024 像素，因此这只是一个微小的变化，并且还可以防止重叠。

@media (max-width: 1200px) {
    #second-section {
        display:none;
    }
}

Answer 3

只需添加 padding: 0 250px; 如下，当达到 max-width: 1050px 时删除：

#post-cont{
  padding: 0 270px;
}

DEMO 以整页打开它并缩小您的窗口大小以查看（基于您的网站）：

#post-cont{
  max-width: 700px;
  display: flex;
  width: 100%;
  padding: 0 270px;
  margin-right: auto;
  margin-left: auto;
}

#second-section {
    max-width: 250px;
    position: fixed;
    margin-left: 80px;
    margin-bottom: 100px;
    width: 100%;
}

@media screen and (max-width: 1050px){
  #second-section {
      display: none;
  }
  #post-cont{
    padding:0;
  }
}
@media screen and (max-width: 1450px){
  #second-section {
      margin-left: 20px;
  }
}
@media (min-width: 992px){
  .container, .container-lg, .container-md, .container-sm {
      max-width: 960px;
  }
}
@media (min-width: 768px){
  .container, .container-md, .container-sm {
      max-width: 720px;
  }
}
@media (min-width: 576px){
  .container, .container-sm {
      max-width: 540px;
  }
}
body{
 overflow-x:hidden;
}

<div id="second-section" class="container">   
    <h2>popüler </h2>

    <div id="second-section-scroll-list">
        <ul class="scroll-list">


            <li class="scroll-list-item mr-2">
                <div class="image" style="height: auto; width: 210px;"><a href="#" draggable="true">
                   peder bi sucuk almış

                </a> </div><br>
            </li>
                <div class="image" style="height: auto; width: 210px;"><a href="#" draggable="true">
                    üç renk yayınevi 11 deneme cevap anahtarı   
                </a></div><br>

                <div class="image" style="height: auto; width: 210px;"><a href="#" draggable="true">
                    burak özgür tanıyan var mı
                </a></div><br>

                <div class="image" style="height: auto; width: 210px;"><a href="#" draggable="true">
                    dostlar tyt mat bir tek bana mı zor geliyor? ne yapdıysam olmuyor
                </a></div><br>

                <div class="image" style="height: auto; width: 210px;"><a href="#" draggable="true">
                    örnek yazacak konu gelmiyor aklıma
                </a></div><br>

                <div class="image" style="height: auto; width: 210px;"><a href="#" draggable="true">
                    neden 12lerin konuları azaltılmıyor?
                </a></div><br>

                <div class="image" style="height: auto; width: 210px;"><a href="#" draggable="true">
                    dünyanın en iyi olayı budur len
                </a></div><br>

                <div class="image" style="height: auto; width: 210px;"><a href="#" draggable="true">
                    Bunu örnek konu olarak düşünün işte
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    ben
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    porçay içeri alınmış .d
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    rastgele bir konU
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    sj
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

                <div class="image" style="height: auto; width: auto;"><a href="#" draggable="true">
                    arkadaşlar bugün cuma lütfen hayırlı cumalar mesajınızı eksik etmeyin!
                </a></div><br>

    </ul></div>
</div>
<div class="container" id="post-cont" style="
">
  <div class="postlar">


    <div class="post">



        <div class="post-info">
          <a href="/post/8tj28s">  
            <div class="post-title">

                Polise güveniyor musunuz beyler
            </div>
          </a>  
            <div class="post-text">
                güvenliğinizi sağlama açısından polise karşı düşünceleriniz neler? 
            </div>

            <div class="post-alt">

                <div class="post-date">
                35m ago
                </div>
                    <a href="/asdasd">
                        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-chevron-compact-down" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67z"></path>
                        </svg>
                    </a>
                <div class="post-author">
                <a href="/user/blchs">@Blchs</a>
                </div>

            </div>

       </div>
    </div>

        <hr>


    <div class="post">



        <div class="post-info">

            <div class="post-title">
                En son ne zaman et yediğimi hatırlamıyorum
            </div>

            <div class="post-text">
                dostlar asgari maaşla geçinmek zor. Milletin köpedğine verdiği eti biz anca izleyebiliyoruz, koyuyor bu bana. 
            </div>

            <div class="post-alt">

                <div class="post-date">
                43s ago
                </div>  

                <div class="post-author">
                @haillucifer
                </div>

            </div>



       </div>
    </div>
    <hr>
    <div class="post">



        <div class="post-info">

            <div class="post-title">
                çiftçilik yapıyorum soruları alayım
            </div>

            <div class="post-text">
                Evet panpalar, ekmeğimi topraktan çıkartıyorum soruları alayım.
            </div>

            <div class="post-alt">

                <div class="post-date">
                1h ago
                </div>  

                <div class="post-author">
                @cacikpilav
                </div>

            </div>

       </div>
    </div>
    <hr>
    <div class="post">



        <div class="post-info">

            <div class="post-title">
                almanya bitti yeğenim ekonomi çok kötü
            </div>

            <div class="post-text">
                gelmeyin buraya burda iş yok gelmeyin
            </div>

            <div class="post-alt">

                <div class="post-date">
                2d ago
                </div>  

                <div class="post-author">
                @deutschland
                </div>

            </div>

       </div>
    </div>
    <hr>
    <div class="post">



        <div class="post-info">

            <div class="post-title">
                olum bu cem yılmazdan benn
            </div>

            <div class="post-text">
                ben çok korkuyorum lan her gün içim içimi yiyor her gün onun sesini duyuyorum sürekli yüzü aklıma geliyor benim bu hayatta en büyük korkum cem yılmazdır gece
            </div>

            <div class="post-alt">

                <div class="post-date">
                3h ago
                </div>  

                <div class="post-author">
                @Blchs
                </div>

            </div>

       </div>
    </div>



  </div>
</div>