I've been struggling to center the red "countdown" div horizontally, but I haven't had any luck so far. I've spent hours trying to find a solution without success.
Here is the HTML code:
<div id="container">
<div id="countdownWrapper">
<div id="countdown">
</div>
</div>
</div>
And here is the CSS code:
body {
margin:0;
background:black;
overflow: hidden;}
#container {
height:100%;
width:100%;
z-index:-900;
position:fixed;
min-width:500px;}
#countdownWrapper {
width:100%;
height:100px;
bottom:0;
position:absolute;
display:block;}
#countdown {
margin-left:auto;
margin-right:auto;
display:block;
width:400px;
height:100px;
background-color: rgba(0, 0, 0, 0.5);
position:absolute;
z-index:1000;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
background:red;}