html - 2 つの列とスライダーが 1 つになり、下に移動します

Question

この CSS と HTML があり、ページのズームが使用されるたびにスライダーが下がり、列に表示されません。何か助けはありますか？

 .mask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 96%;
   border: 5px solid #d2d3d6;
   max-height:320px;
}

.colleft{
   position: relative;
   width: 100%;
   right: 30%;
}

.col1{
   position: relative;
   overflow: hidden;
   float: left;
   height:390px;
   left: 101%;
   background:url('../images/bg_rightt.jpg');
}

.col2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 70%;
   height:390px;
   left: 1%;
   background-color: #f6f7f8;
}

そしてこのhtml

  <div class="col2" style="border: 3px white solid;">
        <!-- Slider start -->
        <div class="slider-wrapper theme-default">

        <div id="slider" class="nivoSlider" style="width:100%; height:320px;">

            <img src="sliderimg/nivo1.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 1" />

            <img src="sliderimg/nivo2.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 2" />

            <img src="sliderimg/nivo3.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 3" />

            <img src="sliderimg/nivo4.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 4" />

            <img src="sliderimg/nivo5.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 5" />

       </div>

     </div>