Need to adjust footer in HTML and CSS - html

Question

I need to adjust footer like the image shown below in four columns as it is. Trying to do but the last two columns are not meeting like the first as shown in the image. Tried to make them in a single row with four columns but unable to adjust it like the sample image shown below. Please help with this.
HTML CODE:
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<h6>Categories</h6>
<ul class="footer-links">
<li>C</li>
<li>UI Design</li>
<li>PHP</li>
<li>Java</li>
<li>Android</li>
<li>Templates</li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>About Us</li>
<li>Contact Us</li>
<li>Contribute</li>
<li>Privacy Policy</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<hr>
</div>
<h2>Join our newsletter</h2>
<h6>Join our newsletter and Stay informed to latest news and events</h6>
<div id=footer>
<input type="text" id="fname" name="firstname" placeholder="Enter your Email:">
<input type="submit" value="Submit">
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="col-md-8 col-sm-6 col-xs-12">
<img src="http://cache1.artprintimages.com/images/jump_pages/rebrand/footer/fb.png" href="#">
<p class="copyright-text">Excoboard extended community 2014 | Privacy Policy
</p>
</div>
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="dribbble" href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>
CSS CODE:
input[type=text] {
width: 15%;
padding: 12px 20px;
margin: 8px 0;
display: block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 15%;
background-color: #0000FF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#footerabout {
border-radius: 5px;
padding: 20px;
}
.site-footer
{
background-color:#26272b;
padding:45px 0 20px;
font-size:15px;
line-height:24px;
color:#737373;
}
.site-footer hr
{
border-top-color:#bbb;
opacity:0.5
}
.site-footer hr.small
{
margin:20px 0
}
.site-footer h6
{
color:#fff;
font-size:16px;
text-transform:uppercase;
margin-top:5px;
letter-spacing:2px
}
.site-footer a
{
color:#737373;
}
.site-footer a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links
{
padding-left:0;
list-style:none
}
.footer-links li
{
display:block
}
.footer-links a
{
color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
color:#3366cc;
text-decoration:none;
}
.footer-links.inline li
{
display:inline-block
}
.site-footer .social-icons
{
text-align:right
}
.site-footer .social-icons a
{
width:40px;
height:40px;
line-height:40px;
margin-left:6px;
margin-right:0;
border-radius:100%;
background-color:#33353d
}
.copyright-text
{
margin:0
}
#media (max-width:991px)
{
.site-footer [class^=col-]
{
margin-bottom:30px
}
}
#media (max-width:767px)
{
.site-footer
{
padding-bottom:0
}
.site-footer .copyright-text,.site-footer .social-icons
{
text-align:center
}
}
.social-icons
{
padding-left:0;
margin-bottom:0;
list-style:none
}
.social-icons li
{
display:inline-block;
margin-bottom:4px
}
.social-icons li.title
{
margin-right:15px;
text-transform:uppercase;
color:#96a2b2;
font-weight:700;
font-size:13px
}
.social-icons a{
background-color:#eceeef;
color:#818a91;
font-size:16px;
display:inline-block;
line-height:44px;
width:44px;
height:44px;
text-align:center;
margin-right:8px;
border-radius:100%;
-webkit-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
color:#fff;
background-color:#29aafe
}
.social-icons.size-sm a
{
line-height:34px;
height:34px;
width:34px;
font-size:14px
}
.social-icons a.facebook:hover
{
background-color:#3b5998
}
.social-icons a.twitter:hover
{
background-color:#00aced
}
.social-icons a.linkedin:hover
{
background-color:#007bb6
}
.social-icons a.dribbble:hover
{
background-color:#ea4c89
}
#media (max-width:767px)
{
.social-icons li.title
{
display:block;
margin-right:0;
font-weight:600
}
}