When zooming out, the content on the page will not always align with the background as it should. Only Internet Explorer seems to maintain perfect alignment when zooming.Internet Explorer 11:Internet Explorer NormalInternet Explorer ZoomBut when doing this with any other browser, the content aligns out of original position, demonstrated with Firefox 26:Firefox NormalFirefox ZoomThis is a minor issue, as I do not expect anyone to ever zoom out this far. However, I like to respect browser zoom compatibility, and provide support for every zoom level that it provides.I would really just like to figure out what exactly is causing this. Am I using wrong code? Is the font not composed properly?index.html
<!doctype html><html lang="en-gb"><head><link href="styles/home.css" rel="stylesheet"><link href="styles/main.css" rel="stylesheet"><meta charset="utf-8"><title>Just Cats</title></head><body><div id="side-space"><div id="main"><div class="box header"></div><ul id="menu"><li class="box">Home</li><li class="box">Ranks</li><li class="box">Bans</li><li class="box">Donate</li><li class="box">Group</li></ul><div id="content-area"><div class="box content">Server Features:<ul><li>Additional Anti-Cheat</li><li>Dead Chat</li><li>No Advertisment</li><li>No Forced Team</li><li>Player Ranks</li><li>Round End Scramble</li><li>Voting:<ul><li>Change Level</li><li>Kick (1 Day Ban)</li><li>Restart Game</li><li>Scramble Teams</li></ul></li></ul></div><div class="box content">News:<ul><li>Group News Item #1</li><li>Group News Item #2</li><li>Group News Item #3</li><li>Group News Item #4</li><li>Group News Item #5</li><li>Group News Item #6</li><li>Group News Item #7</li><li>Group News Item #8</li><li>Group News Item #9</li><li>Group News Item #A</li><li>Group News Item #B</li></ul></div></div><div id="server-area"><div class="box server">All Maps<br>cp_dustbowl ~ 16 / 24</div><div class="box server">Donate to make a<br>second server happen!</div></div></div></div></body></html>
home.css
#content-area { display: flex; margin-top: 2em;}#server-area { display: flex; margin-top: 2em; text-align: center;}#side-space { margin: 2em auto; width: 40em;}.content { margin-left: 2em; width: 100%;}.content:first-child { margin-left: 0;}.server { margin-left: 2em; width: 100%;}.server:first-child { margin-left: 0;}
main.css
body { background-color: #000; background-image: url(../images/operation-room.png); background-position: center top; background-repeat: no-repeat; color: #ddd; font-family: tf2build-webfont; font-size: 1em; margin-left: 0;}ul { margin-bottom: 0;}ul#menu { display: flex; list-style-type: none; margin-top: 2em; padding-left: 0; text-align: center;}@font-face { font-family: tf2build-webfont; src: url(../fonts/tf2build-webfont.woff);}#main { margin: auto; width: 36em;}#menu li { line-height: 1em; margin-left: 1em; width: 100%;}#menu li:first-child { margin-left: 0;}.box { background-color: rgba(0, 0, 0, 0.9); border: 1px solid rgba(1, 1, 1, 0.9); border-radius: 3px; box-shadow: 0 0 3px 1px #000; padding: 10px;}.header { background-image: url(../images/header.png); background-repeat: no-repeat; background-size: 100%; height: 5em;}