top bar won't hug the top, text won't center, and doesn't fill the whole screen?

Question

this is what I have

http://jsfiddle.net/ftKw5/

/* CSS element classes */
 @font-face {
    font-family:'myriad-webfont';
    src: url('webfont/myriad-webfont.ttf') format('truetype'), url('webfont/myriad-webfont.svg#myriad_webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: myriad-webfont;
    color: #000000;
    background: url('img/[email protected]');
    letter-spacing: 2px;
}
h2 {
    ;
    font-size: 3;
}
::-webkit-input-placeholder {
    color:#222222;
    opacity:0.1;
}
/* CSS element IDs */
 #outer-wrapper {
    width: 50em;
    margin: 1em auto;
    background-position:inherit;
    border: 2px solid #dcdcdc;
    border-radius: 1.5em;
    position:relative;
    background-color: #ffffff;
}
#surtitle {
    border-bottom: 1px solid #dcdcdc;
    text-align: center;
    opacity: 0.3;
    font-size:15px;
    letter-spacing: 7px;
}
#topnavbar {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    opacity: 0.5
}
/* Dropdown */
 .nav {
    padding-top:-10;
    height:36px;
    background:#aaa;
    color:#fff;
    text-shadow:1px 1px #888;
    z-index:400
}
.menu a {
    float:right;
    color:#eee;
    text-decoration:none;
    width:120px;
    height:28px;
    padding-top:8px
}
.menu span {
    float:right;
    color:#eee;
    text-decoration:none;
    width:120px;
    height:28px;
    padding-top:8px
}
.menu a:hover {
    color:#fff
}
.menu {
    list-style:none;
    font:10px;
    text-align:center;
    width:600px;
    margin:0;
}
.menu li {
    position:relative;
    float: right;
    width:120px;
    z-index:400
}
.menu ul {
    margin:0;
    padding:0;
    outline:0;
    display:none;
    position:absolute;
    font:10px;
    top:36px;
    left:0;
    background:#aaa;
    display:none;
    list-style:none
}
.menu ul li {
    float:none;
    border-top:1px solid #ccc;
    width:120px
}
.menu ul li a, li.menuhover li a, li.menuhover li.menuhover li a {
    float:none;
    display:block;
    background:none;
    height:22px;
    padding-top:5px
}
.menu ul li a:hover, li.menuhover li a:hover, li.menuhover li.menuhover li a:hover {
    background:#999;
    color:#fff
}
.menu ul li span, li.menuhover li span, li.menuhover li.menuhover li span {
    float:none;
    display:block;
    background:none;
    height:22px;
    padding-top:5px
}
.menu ul ul {
    left:120px;
    top:0
}
.menu li.submenu {
}
.menu li.noborder {
    border-top:none
}
li.menuhover a, li.menuhover li.menuhover a {
    color:#fff;
    background:#999
}
li.menuhover span, li.menuhover li.menuhover span {
    color:#fff;
    background:#999
}

For some reason, when I run it, it won't hug the top etc. I added the jsfiddle so that it's a little better to read and you can see the html to go with it.

Answer 1

If i am understanding your questio0n correct the below css will help you.

CSS:

body {
    font-family: myriad-webfont;
    color: #000000;
    background: url('img/[email protected]');
    letter-spacing: 2px;
    padding:0; // it will remove padding from body tag
    margin:0; // it will remove margin from body tag
}

Answer of new requirement in comments (Menu shoul be center of top bar ):

.menu {
    list-style: none outside none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    text-align: center;
    width: 368px;
}


.menu li {
    float: left;
    width: 120px;
    z-index: 400;
}