when resizing the screen the button goes off the page - html

Question

Everything is good except when the screen is resized the button goes off the screen. I have tried to fix this but I haven't been able to figure out how to resolve this. I have attached screen shots as well to get a better idea of what I'm talking about. Using HTML5 CSS3 and bootstrap
<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>
Update your css [padding: 2% 45%;] as follows works perfectly:-
.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%;
}