CSS - parent element overrides child element properties

You have 2 selectors: #main-content ul li and .footer-buttons ul li . First of them uses id and the second uses class, that's why the first one is used as more descriptive. Use:

#main-content .footer-buttons ul li { display: inline; }

I think IDs do take priority over classes however this post may have more info CSS class priorities

you could always add !important on the .footer-buttons ul and ul li declarations or add the id in front of th3e .footer-buttons class

e.g.

#main-content .footer-buttons ul

Yes, selectors with IDs will always override selectors with just classes. This is due to "specificity"; you can get a good overview here.

Solutions here would include adding #main-content to your footer selectors, or declaring the style as display: inline !important;.