Responsive design with css and html - css

Question

I am building a responsive form design for desktop and mobile devices.
I write a following code for that and it is working fine but it generates the problem when i resize window like mobile screen width the left and right margin space is little large. I want to minimize the space of left and right margin i tried a lot but fail can some one help me please
.main_container {
position: relative;
width: 100%;
border-top: 2px solid #e4e4e4;
border-bottom: 2px solid #e4e4e4;
overflow: hidden;
}
.main_container:after {
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 0 100px;
border-color: #007bff transparent transparent transparent;
}
.left_parent {
float: left;
}
.left_child {
padding-right: 2%;
padding-left: 0%;
text-align: center;
}
.right_child {
padding-right: 0%;
padding-left: 0%;
text-align: center;
/*width: 40%;*/
}
.right_parent {
float: left;
}
.left_uppper_text {
font-family: 'Open Sans', sans-serif;
font-size: 130%;
text-align: justify;
margin-right: 3%;
color: #847979;
}
.left_bottom_text {
font-family: 'Open Sans', sans-serif;
font-size: 81%;
color: #bbb;
font-weight: bold;
}
.main_child {
margin: auto;
padding: 0% 0% 0% 27%;
overflow: hidden;
margin: auto;
width: 50%;
/* border: 3px solid green; */
padding: 10px;
}
.input_email {
width: 67%;
padding: 3% 17px;
box-sizing: border-box;
margin: 8px 0;
}
.input_button {
max-width: 190px;
min-width: 84px;
padding: 3% 20px;
box-sizing: border-box;
margin: 8px 0;
background-color: rgba(245, 0, 83, 0.73);
color: white;
border: none;
border-top: 2px solid rgba(245, 0, 83, 0.73);
border-bottom: 2px solid rgba(245, 0, 83, 0.73);
}
<div class="main_container">
<div class="main_child">
<div class="left_parent">
<div class="left_child">
<span class="left_uppper_text"> Join over 20,2000 blog subscriber </span> <br>
<span class="left_bottom_text"> We guarantee 100% customer satisfaction</span>
</div>
</div>
<div class="right_parent">
<div class="right_child">
<input type="text" class="input_email">
<button class="input_button">Subscribe</button>
</div>
</div>
</div>
</div>

Answer 1

So, you can manipulate styles at any screen size using #media queries. In your case it might look something like this:
#media (max-width: 768px /* Mobile size */) {
/* Element you want to style at this screen size */
.element {
margin: 5px; /* Or whatever style you want */
}
}
You can read more about #media queries here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp