Div движется вниз по уменьшению масштаба

Question

Моя проблема в том, что eTextSection1 не перемещается (что хорошо), но по какой-то причине eTextSection2 сдвигает страницу вниз, когда я уменьшаю масштаб. Как я могу заставить это остановиться? Я играл с этим некоторое время, но мне не повезло, поэтому любая помощь ценится. Вот сайт в действии http://www.andrewhnovak.com/test/index1.html

<div class="container"> 
     <div class='underHeader'></div> 
    </div> 

    <div class="container"> 
     <div class='whiteBox'> 
      <div class='newProducts'></div> 

      <div class='eTextSection1'> 

      <div id="frontPage"> 
Some Text 

       </div> 
       <div id="eRow1"> 
        Text 1 

        <div id="eRow1Rating">77</div> 
       </div> 

       <div id="eRow2"> 
        Text 2 

        <div id="eRow2Rating">66</div> 
       </div> 

       <div id="eRow3"> 
        Text 3 

        <div id="eRow3Rating">85</div> 
       </div> 

       <div id="eRow4"> 
        Text 4 

        <div id="eRow4Rating">99</div> 
       </div> 

       <div id="eRow5"> 
        Text 5 

        <div id="eRow5Rating">47</div> 
       </div> 

       <div id="eRow6"> 
        Text 6 

        <div id="eRow6Rating">55</div> 
       </div> 

       <div id="eRow7"> 
        Text 7 

        <div id="eRow7Rating">37</div> 
       </div> 

       <div id="more"> 
        <a href="#">Link</a> 
       </div> 
      </div> 

      <div class='eTextSection2'> 
       <h3>Title</h3> 

       <div id="pRow1"> 
        Row Text 1 

        <div id="pRow1Rating">22</div> 
       </div> 

       <div id="pRow2"> 
        Row Text 2 

        <div id="pRow2Rating">66</div> 
       </div> 

       <div id="pRow3"> 
        Row Text 3 

        <div id="pRow3Rating">88</div> 
       </div> 

       <div id="pRow4"> 
        Row Text 4 

        <div id="pRow4Rating">67</div> 
       </div> 

       <div id="pRow5"> 
        Row Text 5 

        <div id="pRow5Rating">98</div> 
       </div> 

       <div id="pRow6"> 
        Row Text 6 

        <div id="pRow6Rating">35</div> 
       </div> 

       <div id="pRow7"> 
        Row Text 7 

        <div id="pRow7Rating">51</div> 
       </div> 

       <div id="moreLink"> 
        <a href="#">Link</a> 
       </div> 
      </div> 
</div> 

CSS

.eTextSection1{ 

     width:240px; 
     border-style:solid; 
position:relative; 

    border-bottom:solid; 
     border-width:2px; 

     } 

     .eTextSection2{ 

     width:240px; 
     border-style:solid; 
position:relative; 

    border-bottom:solid; 
     border-width:2px; 
     left:200px; 
     bottom:400px; 
     } 
.whiteBox{ 
    background-color:white; 
    width:800px; 
    height:800px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    top:80px; 
    -webkit-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43); 
-moz-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43); 
box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43); 
margin-bottom:100px; 
    } 

Answer 1

Может быть, это потому, что вы не имеете .eTextSection2 {в вашем CSS.

Answer 2

Попробуйте установить свойство положения на .eTextSection2 в position:absolute;

Answer 3

изменить свой Css, чтобы это

Использование Diplay: сгибать; В вашем классе Whitbox

.eTextSection1{ 

     width:240px; 
     border-style:solid; 
position:relative; 

    border-bottom:solid; 
     border-width:2px; 

     } 

     .eTextSection2{ 

     width:240px; 
     border-style:solid; 
position:relative; 

    border-bottom:solid; 
     border-width:2px; 
     left:2px; 
     } 
.whiteBox{ 
display:flex; 
    background-color:white; 
    width:800px; 
    height:800px; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    top:80px; 
    -webkit-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43); 
-moz-box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43); 
box-shadow: 10px 11px 5px -6px rgba(0,0,0,0.43); 
margin-bottom:100px; 
    }