Header disappears at right side of page - html

Question

I am trying to get my template working and I have a test page so you can see the miss-hap.
http://merkd.com/gtamoney
The header disappears in the top right corner of the page, but the header border at the bottom of the header seems unaffected and runs the whole length of the page. My CSS is below; I placed the #header and #headerBorder at the top but I also included the rest of the CSS for all the objects in the header just in case it's relevant.
#headerBorder {
display: block;
position: fixed;
z-index: 99;
top: 3.0em;
width: 100%;
height: 0.5em;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
#header {
position: fixed;
width: 100%;
top: 0;
z-index: 100;
left: 0;
background-color: #FFFFFF;
height: 3.0em;
}
#header #logo {
position: fixed;
left: 3.0em;
top: 0.4em;
width: 7.25em;
height: 3.0em;
}
#header a {
display: block;
float: right;
height: 2.25em;
font-size: 0.9em;
text-decoration: none;
font-weight: 600;
color: #777777;
text-transform: uppercase;
letter-spacing: 0.01em;
margin: 0.15em 0 0 2.5em;
padding: 1.25em 0.5em 0.2em 0.5em;
transition: color 0.30s ease-in-out;
-o-transition: color 0.30s ease-in-out;
-moz-transition: color 0.30s ease-in-out;
-webkit-transition: color 0.30s ease-in-out;
} #header a:last-of-type { margin-left: 0; }
#header a:hover {
color: #000000;
}
#header div {
float: right;
margin: -0.1em 2.0em 0 0;
}
#header div a {
margin: 0;
}
#header div a img {
width: 1.5em;
height: 1.5em;
opacity: 0.6;
margin: 0;
}
#header div a:hover img {
opacity: 1.0;
transition: opacity 0.30s ease;
-o-transition: opacity 0.30s ease;
-moz-transition: opacity 0.30s ease;
-webkit-transition: opacity 0.30s ease;
}

Answer 1

Remove
#header { right: 10em; }
from alpha.header.css

Answer 2

CSS should looks like below
body {
background-color: #AAAAAA;
background-image: url("/engine/img/texture.png");
background-repeat: repeat;
margin: 0; }
#header {
background-color: #FFFFFF;
height: 3em;
min-width: 100%;
right: 10em;
top: 0;
z-index: 100; }
#headerBorder {
background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
display: block;
height: 0.5em;
top: 3em;
width: 100%;
z-index: 99; }
Note: Try not to use position:fixed.