My footer icon are floated to the left and they shouldn't be. What am I doing wrong?

I was working on a project and my footer worked flawlessly, I started working on another project and the footer ended up on the left. I couldn't find anything wrong with my css, but I copy and pasted the code from my last project's footer that worked to double check and it still floated left. I think something besides the footer css is causing this, but I have no idea what. I'm trying to center two media icons and the bottom of the page. If you you know help would be greatly appreciated. .media-icon is a class embedded in the <ul> of the <footer> list with facebook and twitter icons. The .gallery is embedded in the <ul> of a list in a <section>

main.css

/General/

html {width: 1334px; font-size: 1em;}

img { max-width: 100%;}

body {max-width: 100%; margin: 0 auto; }

header {max-width: 100%; margin: 0 auto;}

nav {max-width: 100%; margin: 0 auto; background-color: lightblue; text-align: center;}

nav ul {list-style: none;}

nav li {display: inline-block;}

footer {text-align: center; clear: both;}

footer ul {list-style: none;}

footer li {display: inline-block;}

.media-icon { width: 20px; height: 20px; margin: 0 5px;}

/home page/

.gallery {margin: 0 auto; list-style: none;}

.gallery li {float: left; width: 45%; margin: 2.5%; padding: 0;}