當調整屏幕的大小時，按鈕離開頁面

Question

除了當屏幕被調整大小時，按鈕離開屏幕時，一切都很好。我試圖解決這個問題，但我一直無法弄清楚如何解決這個問題。我還附上了屏幕截圖，以便更好地瞭解我在說什麼。使用HTML5 CSS3和引導

<section id="prod-one" class="prod-one"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-12"> 
       <div class="col-md-6 col-sm-6"> 
        <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms"> 
         <img src="images/cusotm%20image.jpg" alt="Custom"> 
        </div> 
       </div> 
       <div class="col-md-6 col-sm-6"> 
        <div class="block wow fadeInLeft" data-wow-delay=".3s" data-wow-duration="500ms"> 
         <h3>test</h3> 
         <h2>test</h2> 
         <p class="par-one-ma">test</p> 
         <p> 
          test 
         </p> 
         <div class="area-fir"><a class="btn-max" href="#">Discover</a> </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

CSS

#prod-one { 
    padding-top: 140px; 
    padding-bottom:; 
} 

#prod-oned .block { 
    padding: 20px 30px 30px; 
} 

#prod-one .block h2 { 
    font-size: 25px; 
    font-weight: 500; 
    margin-bottom: 30px; 
    text-transform: none; 
    color: #00bfff; 
} 

#prod-one.block h3 { 
    font-size: 40px; 
    font-weight: 400; 
    margin-bottom: 30px; 
    text-transform: uppercase; 
} 


#prod-one.block p { 
    color: #727272; 
    font-size: 16px; 
    line-height: 28px; 
    margin-bottom: 35px; 
} 

#prod-one .block img { 
    max-width: 100%; 
    padding-top: 25px; 
} 

#prod-one .block .matrix-bold { 
    font-weight: 500; 
    margin-top: -20px; 
} 

.btn-max { 
    width: auto; 
    margin-right: auto; 
    padding: 2% 50%; 
    font-weight: 500; 
    text-decoration: none; 
    background-color: #fff; 
    color: #00bfff; 
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
    border: 2px solid #00bfff; 
    letter-spacing: .5px; 
    font-size: 18px; 
} 

    .btn-max:hover, 
    .btn-max:active { 
     border: 2px solid #00bfff; 
     background-color: #00bfff; 
     color: #1c1c1c; 
    } 

Answer 1

#prod-one { 
 
    padding-top: 140px; 
 
    padding-bottom:; 
 
} 
 

 
#prod-oned .block { 
 
    padding: 20px 30px 30px; 
 
} 
 

 
#prod-one .block h2 { 
 
    font-size: 25px; 
 
    font-weight: 500; 
 
    margin-bottom: 30px; 
 
    text-transform: none; 
 
    color: #00bfff; 
 
} 
 

 
#prod-one.block h3 { 
 
    font-size: 40px; 
 
    font-weight: 400; 
 
    margin-bottom: 30px; 
 
    text-transform: uppercase; 
 
} 
 

 

 
#prod-one.block p { 
 
    color: #727272; 
 
    font-size: 16px; 
 
    line-height: 28px; 
 
    margin-bottom: 35px; 
 
} 
 

 
#prod-one .block img { 
 
    max-width: 100%; 
 
    padding-top: 25px; 
 
} 
 

 
#prod-one .block .matrix-bold { 
 
    font-weight: 500; 
 
    margin-top: -20px; 
 
} 
 

 
.btn-max { 
 
    width: auto; 
 
    margin-right: auto; 
 
    padding: 2% 44%; 
 
    font-weight: 500; 
 
    text-decoration: none; 
 
    background-color: #fff; 
 
    color: #00bfff; 
 
    transition: background-color 0.2s, border 0.2s, color 0.2s; 
 
    border: 2px solid #00bfff; 
 
    letter-spacing: .5px; 
 
    font-size: 18px; 
 
} 
 

 
    .btn-max:hover, 
 
    .btn-max:active { 
 
     border: 2px solid #00bfff; 
 
     background-color: #00bfff; 
 
     color: #1c1c1c; 
 
    }

<section id="prod-one" class="prod-one"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
       <div class="col-md-6 col-sm-6"> 
 
        <div class="block wow fadeInRight" data-wow-delay=".3s" data-wow-duration="500ms"> 
 
         <img src="images/cusotm%20image.jpg" alt="Custom"> 
 
        </div> 
 
       </div> 
 
       <div class="col-md-6 col-sm-6"> 
 
        <div class="block wow fadeInLeft" data-wow-delay=".3s" data-wow-duration="500ms"> 
 
         <h3>test</h3> 
 
         <h2>test</h2> 
 
         <p class="par-one-ma">test</p> 
 
         <p> 
 
          test 
 
         </p> 
 
         <div class="area-fir"><a class="btn-max" href="#">Discover</a> </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</section>

更新你的CSS [填充：2％45％;作爲完全追隨作品： -

.btn-max { 
font-weight: 500; 
text-decoration: none; 
background-color: #FFF; 
color: #00BFFF; 
transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s; 
border: 2px solid #00BFFF; 
letter-spacing: 0.5px; 
font-size: 18px; 
width: 21%; 
padding: 2% 45%; 

}