Menu verplaatst niet

Hallo iedereen. Ik ben nog erg een beginneling scripten etc. en ben nu vooral bezig met html en css. Nu volgde ik de volgende tutorial: https://www.youtube.com/watch?v=fA8AbEBz8Pg&list=PLA7F9875BD031DC16&index=39 . Dit is inderdaad "how to make a social network" waar ik dus veeeel te onervaren voor ben, maar het ging me vooral om de eerste tutorial's met het ontwerp met html en css zodat ik hier veel van kan leren. Maar nu liep ik tegen een probleem aan, zoals wel meer mensen aangeven in de reacties (ik denk dat de tutorial's niet van hoge kwaliteit zijn en de beste man ook niet alles helemaal goed doet, maar in ieder geval: Hij voegde dus een menu toe en nu was het de bedoeling dat dit menu rechts bovenin kwam en als het scherm kleiner gemaakt zou worden zou het menu altijd in beeld blijven. Dit is ongeveer zijn code:

* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eff5f9;
}
.headerMenu {
background-image : url(../img/menu_bg.png);
height : 56px;
border-bottom : 0;
width : 100%;
}
#wrapper {
background-image : url(../img/menu_bg.png);
margin-left : auto;
margin-right : auto;
width : 1000px;
padding-top : 0;
padding-bottom : 0;
}
.logo {
background-image : url(../img/menu_bg.png);
width : 125px;
}
.logo img {
background-image : url(../img/menu_bg.png);
width : 150px;
height : 38px;
}
.search_box {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 13px;
margin-left : 135px;
}
.search_box {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 13px;
margin-left : 135px;
}
.search_box #search input[type="text"] {
background : url(../img/search-white.png) 10px 6px no-repeat #267BB6;
outline : none;
border : none 0;
font : bold 12px Arial;
width : 350px;
padding : 6px 15px 6px 35px;
text-shadow : 0 2px 2px rgba(0, 0, 0, 0.3);
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
transition : all 0.7s 0s ease;
}
.search_box #search input[type="text"]:focus {
background : url(../img/search-dark.png) 10px 6px no-repeat #FCFCFC;
color : #6A6F75;
width : 350px;
box-shadow : 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
@media screen and (max-width: 1280px){
#menu {
background-image : url(../img/menu_bg.png);
position : absolute;
top : 0;
right : 0;
height : 37px;
padding-top : 19px;
margin-right : 4%;
}
}
@media screen and (min-width: 1280px){
#menu {
background-image: url(../img/menu_bg.png);
}
}
#menu a {
color : #FFFFFF;
text-decoration : none;
font-size : 14px;
background-image : url(../img/menu_bg.png);
background-repeat : no-repeat;
padding-top : 19px;
padding-bottom : 22px;
padding-left : 10px;
padding-right : 10px;
}
#menu a:hover {
background-image : url(../img/menu_bg_hover_mouse_over.png);
}

Hij gebruikt hier heel veel media screen (volgens mij nog twee keer), maar dit heeft volgens mij niet veel nut want er gebeurde dus niks met m'n menu. Ik heb nu zelf zitten klooien en toen kreeg ik m'n menu wel naar rechtsboven, alleen als ik nu het scherm kleiner maakte bewoog het menu niet meer mee. Dit is mijn code:

* {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
background-color: #eFF5f9;
}
.headerMenu {
background-image: url(../img/menu_bg.png);
height: 56px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
#wrapper {
background-image: url(../img/menu_bg.png);
margin-left: auto;
margin-right: auto;
width: 1000px;
padding-top: 0px;
padding-bottom: 0px;
}
.logo {
background-image: url(../img/menu_bg.png);
width: 125px;
}
.logo img {
background-image: url(../img/menu_bg.png);
width: 150px;
height: 38px';
padding-top: 5px;
}
.search_box {
background-image: url(../img/menu_bg.png);
position: absolute;
top: 13px;
margin-left: 160px;
}
#search input[type="text"] {
background: url(../img/search_white.png) no-repeat 1px 1px #267bb6;
outline: none;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
width: 350px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(../img/search_black.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 1280px) {
#menu {
background-image: url(../img/menu_bg.png);
background-size: 100%;
position: absolute;
top: -20px;
right: -730px;
height: 37px;
padding-top: 19px;
margin-right; 6%;
}
}

#menu a {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image: url(../img/menu_bg.png);
background-repeat: no-repeat;
padding-top: 19px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
background-image: url(../img/menu_bg_hover_mouse_over.png);
}

Iemand dus enig idee hoe je op een goede manier media screen gebruikt en gebruikte hij dit dus zodat het menu mee bewoog met het scherm (als je het bijvoorbeeld minimaliseert) of is dit ergens anders voor, en hoe kan ik dan op een goede manier zorgen dat mijn menu zich aanpast aan het scherm?

edit: er zat trouwens ook een zoekbar in de header, alleen eerst bleef m'n menu met zijn code dus voor die zoekbar.


Met vriendelijke groeten,

Daniël

[size=xsmall]Toevoeging op 24/02/2015 23:11:36:[/size]

Dit is hoe ik het heb als m'n scherm groot is met m'n eigen code:
http://nl.tinypic.com/r/21jd4zn/8

En dit is hoe ik het heb als ik m'n scherm kleiner maak (wat dus niet zou moeten zijn als ik zijn code zou gebruiken maar dus wel is...En ik krijg dit ook bij zijn code als m'n scherm groter is!)
http://nl.tinypic.com/r/2gx1lk6/8