Setting viewport or optimize code - html

Question

I have a problem here, than I often run into. I have this small landingpage:
Small Landingpage
When I look at the following viewports:
Iphone 6 & 6+ landscape
Ipad portrait and landscape
the form is not fitting.Is that because of bad coding, or is it just like this? Which means that there always will be some editing regarding viewports?
#import url(https://fonts.googleapis.com/css?family=Questrial);
html,
body {
height: 100%;
background: center no-repeat fixed url('../images/bg_1.jpg');
background-size: cover;
color: #444;
font-family: 'Questrial', sans-serif;
}
#media (min-width: 768px) {
h1 {
font-size: 68px;
}
}
a {
color: #999;
}
a:hover {
color: #111;
}
.catchy-text-wrapper {
width: 100%;
text-align: center;
}
#catchyText {
background-color: red;
padding: 20px;
background: rgba(32, 63, 86, 0.8);
display: inline-block;
}
#emailNews {
font-size: 20px;
}
/* Round corners on button */
.btn,
.well,
.panel {
border-radius: 0;
}
.btn-blue {
background: rgba(32, 63, 86, 1.0);
border-color: #5491bd;
border-radius: 10px;
color: #fff;
}
.btn-huge {
padding: 17px 22px;
font-size: 22px;
}
section {
padding-top: 70px;
padding-bottom: 50px;
min-height: 100%;
min-height: calc(100% - 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#section1 {
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
}
/* Form Config */
input {
font-size: 16px;
min-height: 40px;
border-radius: 25px;
line-height: 20px;
padding: 15px 30px 16px;
border: 1px solid #b9b9af;
margin-bottom: 10px;
background-color: #fff;
opacity: 0.9;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.subscribe-input {
float: center;
width: 23%;
height: 5px;
text-align: left;
margin-right: 2px;
}
.btn-placing {
padding-top: 20px;
"
}
#media screen and (max-width: 767px) {
.subscribe-input {
width: 100%;
}
}
<section class="container-fluid" id="section1">
<div class="v-center">
<h1 class="text-center">COMPANY NAME</h1>
<h2 class="text-center">Change this <b>subline</b> here</h2>
<div class="catchy-text-wrapper">
<h2 class="text-center" id="catchyText">A CATCHY PIECE OF TEXT</h2>
</div>
<br>
<p class="text-center"><i id="emailNews">Enter your email for more news</i>
</p>
</div>
<div class="catchy-text-wrapper">
<form role="form" action="register.php" method="post" enctype="plain">
<input type="email" name="email" class="subscribe-input" placeholder="Enter your e-mail address..." required>
</form>
</div>
<p class="text-center btn-placing">
Give me the news
</p>
</section>

Answer 1

Your <input> is displaying at its default box-sizing: content-box, which means that when your
#media screen and (max-width: 767px) {
.subscribe-input {
width: 100%;
}
}
is applied, the content box is getting sized to 100%. Padding is outside the content box, so when you add in the
input {
padding: 15px 30px 16px;
}
your <input> is 60px wider than its container.
Get around this by adding box-sizing: border-box to your input's styles.