Can't change background on a footer - html

Question

I'm trying to make the background of my footer dark grey. Here's the HTML:
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>XYZ</li>
<li>XYZ</li>
<li>XYZ</li>
<li>XYZ</li>
<li>XYZ</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-links">
<li><i class="ion-social-twitter icon-small"></i></li>
<li><i class="ion-social-facebook icon-small"></i></li>
<li><i class="ion-social-instagram icon-small"></i></li>
<li><i class="ion-social-google icon-small"></i></li>
</ul>
</div>
</div>
</footer>
and here's the CSS:
footer {
background-color: #555;}
I think it's because the information in the two divs is covering up the footer. However, I've tried giving the divs their own class names and using the 'inherit' property and it hasn't worked. If anyone could give me some advice I'd very much appreciate it.

Answer 1

Add an "important" to the rule setting the background-color of the footer and you're set to fly:
<style type="text/css">
footer, footer div {
background-color: #555 !important;
}
</style>

Answer 2

Solution
Hi there! When I put only the code you provide to us in here http://www.play-hookey.com/htmltest/ A grey footer is created. I can only conclude that another command is overriding yours. The easiest way to fix this is by making it important
footer, footer{
background-color: #555 !important;
}
This is however, bad practice, and you should troubleshoot before doing that
Troubleshooting
Try putting your footer styling below all other styling, the browser might be reading something else and overwriting your code
Its not good practice but you could use inline styling
Or you can create a class and apply it to your footer, as those rank above styling the element

Answer 3

I know this might sound silly, but if you are running it on your browser to check, May I suggest deleting your browsing history?
I've had issues in the past which make my head scratch only to realize the solution is solved after I delete my browsing history (mainly the cache).

Answer 4

Unable to comment but I will provide this link where it is working as expected.
footer {
background-color: #555;
}
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li>XYZ</li>
<li>XYZ</li>
<li>XYZ</li>
<li>XYZ</li>
<li>XYZ</li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-links">
<li><i class="ion-social-twitter icon-small"></i></li>
<li><i class="ion-social-facebook icon-small"></i></li>
<li><i class="ion-social-instagram icon-small"></i></li>
<li><i class="ion-social-google icon-small"></i></li>
</ul>
</div>
</div>
</footer>
Codepen