Div align to center - html

Question

Hello i spent hours doing this but still can't align the social media icons to the center of text "Connect with us" when it's in desktop size. It's only aligned when it's in mobile size i want them to align to center either its desktop size or mobile. I want the content of the footer to be responsive. I already used media queries but i encounter a problem so i repeat my footer again from the start because its not responsive when in desktop size. Please give me some ideas how to do it or suggestions. Im new to html and css.
here is the desktop size. I want the social media icons to align to the center of text "Connect with us".
here is the mobile size. Its well aligned here.
UPDATE:
This is what i want to do in the first picture. But i repeat my footer because when i minimized it as a desktop its not responsive the alignments, the text, the height it's a disaster so i decided to do it again from the start. I already used media queries before but as a desktop its not working when i minimized it it's not responsive but in mobile size its working.
here is my html code for the footer.
<div class="content">
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col col-sm-4">
<h4 class="connect">Connect With Us</h4>
<div class="twitter-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
<div class="linkedin-hover social-slide"></div>
</div>
</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;
}
h4{
text-align: center;
padding-top: 20px;
}
.twitter-hover {
background-image: url('images/twitter-hover.png');
margin-left: 65px;
}
.facebook-hover {
background-image: url('images/facebook-hover.png');
margin-left: 15px;
}
.linkedin-hover {
background-image: url('images/linkedin-hover.png');
margin-left: 15px;
}
.social-slide:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
.social-slide{
height: 35px;
width: 38px;
float:left;
-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;
}

Answer 1

Update: rewritten my answer completely.
You shouldn't use float:left when you want your content to be centered.
<div class="footer-col col-sm-4">
<h4 class="connect">Connect With Us</h4>
<ul>
<li><span class="twitter-hover social-slide"></span></li>
<li><span class="facebook-hover social-slide"></span></li>
<li><span class="linkedin-hover social-slide"></span></li>
</ul>
</div>
css:
.footer-col h4 {
text-align: center;
}
.footer-col ul {
list-style: none;
text-align: center;
}
.footer-col li {
display: inline;
}
.social-slide {
display: inline-block;
height: 35px;
width: 38px;
line-height: 35px;
margin-left: 15px;
/* don't use float: left! */
}
.social-slide:first-child {
margin-left: 0;
}
.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'); }

Answer 2

if you also use bootstrap latest then you use this class
col-sm-offset-......12
you don't know what size of your device you adjust self` col-sm-offset........12345 up to12
for more detail read out
https://getbootstrap.com/examples/grid/

Answer 3

Here is the fiddle
https://jsfiddle.net/brunocoder/ozgntcm2/1/
First of all there is one extra closing div in your footer tag.
You need to use bootstrap offset property to centralize your column. Here is the link http://getbootstrap.com/css/#grid
So your code should be something like this.
Modified HTML
<div class="content">
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col col-sm-4 col-md-4 col-lg-4 col-md-offset-4">
<h4 class="connect">Connect With Us</h4>
<div class="twitter-hover social-slide"></div>
<div class="facebook-hover social-slide"></div>
<div class="linkedin-hover social-slide"></div>
</div>
</div>
</div>
</footer>

Answer 4

Use bootstrap in every section of your code, like if you have used div inside the div , use bootstrap to align them also as if you not then it will not align themselves according to the screen size.
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col col-sm-4 col-md-4 col-lg-4 col-md-offset-4">
<h4 class="connect">Connect With Us</h4>
<a href="https://twitter.com/official_gapc" target="_blank" title="Follow us on Twitter">
<div class="twitter-hover social-slide col-sm-4">
</div>
</a>
<a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts" target="_blank" title="Like us on Facebook">
<div class="facebook-hover social-slide col-sm-4">
</div>
</a>
<a href="https://www.linkedin.com/edu/governor-andres-pascual-college-in-navotas-city-39345" target="_blank" title="Join us on Linkedin">
<div class="linkedin-hover social-slide col-sm-4">
</div>
</a>
</div>
<div class="footer-col col-sm-4 col-md-4 col-lg-4 col-md-offset-4"></div>
<div class="footer-col col-sm-4 col-md-4 col-lg-4 col-md-offset-4"></div>
</div>
</div>
</footer>
place anything you want to place in two div below or remain as it is, might it will help you to make responsive footer.