Unable to stretch footer horizontally on page - html

Question

I am fairly new to web development and I am trying to stretch the footer section horizontally on my website so, but instead it is appearing as a box. I have repeatedly tried changing the background of every div of the code but things are not working out. As a troubleshooting step I also tried this.I am using Bootstrap.
Here is my HTML:
<div role="navigation" style="background-color: blue">
<div class="container">
<footer class="container-fluid" id="contact" style="width: 100%;">
<div class="row">
<div class="col-md-12">
<h2>Contact Us</h2>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 boxes">
<div class="contact-box">
<div class="contact-icon pull-left"><i class="fa fa-map-marker fa-fw"></i></div>
<div class="contact-details pull-left">
221 Baker Street
</div>
</div>
<div class="contact-box extra-left-padding">
<div class="contact-icon pull-left"><i class="fa fa-mobile fa-fw"></i></div>
<div class="contact-details pull-left">
fun#funny.nl<br />
000-000-000
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
<span class="copyright">© Hello!</span>
</div>
</div>
</footer>
</div>
</div>
And my CSS:
footer {
background-color: #002776;
padding-top: 80px;
padding-bottom: 80px;
text-align: center;
color: #F0F0F0;
font-weight: 300;
font-size: 14px;
}
footer h2 {
margin: 0 0 40px;
font-weight: 400;
}
footer div.boxes {
text-align: center;
}
footer div.contact-box {
display: inline-block;
margin-bottom: 40px;
width: 280px;
vertical-align: top;
}
#media screen and (max-width: 767px) {
footer div.contact-box {
width: 90%;
}
}
footer div.contact-box.extra-left-padding {
padding-left: 80px;
}
#media screen and (max-width: 767px) {
footer div.contact-box.extra-left-padding {
padding-left: 0;
}
}
footer div.contact-box div.contact-icon {
background-color: #0038a9;
padding: 6px;
margin: 0 20px 20px 0;
text-align: center;
font-size: 2em;
}
footer div.contact-box div.contact-details {
text-align: left;
line-height: 1.75em;
}
#media screen and (max-width: 767px) {
footer div.contact-box div.contact-details {
font-size: 12px;
}
}
footer span.contact-link {
display: inline-block;
padding: 0 10px 70px;
}
footer a {
color: #F0F0F0;
}
footer a:hover {
color: #00a1de;
}
footer span.copyright {
color: #999;
display: block;
text-align: center;
font-size: 14px;
}
footer span.copyright img {
max-width: 75px;
position: relative;
top: -2px;
}

Answer 1

HTML code must be only :
Css is good.
<footer class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2>Contact Us</h2>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 boxes">
<div class="contact-box">
<div class="contact-icon pull-left"><i class="fa fa-map-marker fa-fw"></i></div>
<div class="contact-details pull-left">
221 Baker Street
</div>
</div>
<div class="contact-box extra-left-padding">
<div class="contact-icon pull-left"><i class="fa fa-mobile fa-fw"></i></div>
<div class="contact-details pull-left">
fun#funny.nl<br />
000-000-000
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
<span class="copyright">© Hello!</span>
</div>
</div>
</footer>