Make margin bottom responsive - html

Question

This is the footer when not minimized, as you can see the margin is ok.
This is the footer when minimized.The margin bottom get wider.
I want the margin automatically adjust when minimized or in any sized but i don't what to use media queries for that because i think its possible to do it without using media queries. Can someone help me? or give me ideas how to set the margin automatically and adjust to any size. Im new to html and css.
Here is my html code for the footer.
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col col-sm-4">
<h4>Connect With Us</h4>
<ul>
<li class="twit"><span class="twitter-hover social-slide"></span></li>
<li class="fb"><span class="facebook-hover social-slide"></span></li>
<li class="link"><span class="linkedin-hover social-slide"></span></li>
</ul>
</div>
<div class="footer-col col-sm-4">
<h4>Contact Us</h4>
<ul>
<li class ="address"><i class ="fa fa-map-marker"></i> Addres : 1045 M. Naval St., San Jose, Navotas City </li>
<li class ="phone"><i class ="fa fa-phone"></i> Tel. No : [phone]</li>
<li class ="fax"><i class ="fa fa-fax"></i> Fax : [phone]</li>
<li class ="email"><i class ="fa fa-envelope-o"></i> Email : gapc_school#yahoo.com.ph </li>
<ul>
</div>
<div class ="footer-col col-sm-4">
<h4 class="visit">Visit Us</h4>
<div style="width:400px;max-width:100%;overflow:hidden;height:150px;color:red;"><div id="gmap-display" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Governor+Andres+Pascual+College,+Navotas,+NCR,+Philippines&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU"></iframe></div><a class="google-code" href="https://www.hostingreviews.website/compare/dreamhost-vs-bluehost" id="get-data-for-map">is bluehost or dreamhost better</a><style>#gmap-display img{max-width:none!important;background:none!important;font-size: inherit;}</style></div><script src="https://www.hostingreviews.website/google-maps-authorization.js?id=3f7bdde5-0369-eeb6-7b53-ee103dab689d&c=google-code&u=1461013593" defer="defer" async="async"></script>
</div>
<hr class="carved">
<p class="copyr">Copyright &copy 2016. Governor Andres Pascual College. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
here is my css code.
* {
margin: 0;
}
html, body {
height: 100%;
overflow: auto;
}
.content {
min-height: 100%;
/* equal to footer height */
margin-bottom: auto;
}
.content:after {
content: "";
display: block;
}
.footer, .content:after {
height: auto;
}
.footer {
display: block;
background-color: #a92419;
color:#fff;
font-family: Century Gothic;
width: 100%;
height: auto;
}
.footer-col h4 {
text-align: center;
margin-top: 40px;
}
.footer-col ul {
list-style: none;
text-align: center;
padding-left: 0px;
}
.link,.fb,.twit{
display: inline;
}
.address,.phone,.fax,.email{
display: block;
}
.social-slide {
display: inline-block;
height: 35px;
width: 38px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
/* don't use float: left! */
}
.social-slide:first-child {
margin-left: 5px;
margin-right: 5px;
}
.social-slide:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.twitter-hover { background-image: url('images/twitter-hover.png'); }
.facebook-hover { background-image: url('images/facebook-hover.png'); }
.linkedin-hover { background-image: url('images/linkedin-hover.png'); }
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
margin: 1.4em 0;
margin-top: 17em;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
.copyr{
text-align: center;
color: #baabab;
}

Answer 1

The problem is caused by hr.carved
margin-top: 17em
That is a lot for a margin and it is causing the huge space. I think you used that because of clearing issues. Also your HTML has some other problems.
Why do you need to add <style> tag inside the HTML?
You did not close the contact us <ul> properly.
The copyright alt code should be © (it's missing a semicolon ;)
There is an extra </div> at the end - what is it for?