Another navigation problem

[gffects]

Hey people no idea what it is with me and navigations but the hate me lol.

 

Ok heres the thing I am going to competing in the worldskills uk on june the 1st and I plan on winning with this design, the site consists of 3 parts pc screen,ipad screen and phone screen using the @media code now i have managed everything so far except when the page is set to phone size the nav bar has got a margin from the left so its not fitting the entire screen as I want it. Im sure theres an easy mistake somewhere as usual but your help would be awesome can't work it out.

 

heres the css:

 

@charset "utf-8";

/* CSS Document */

li{display:inline;list-style:none;}

body{width:auto;padding:10px;}

#wrapper{position:relative;max-width:1000px; margin:0px auto;background:#252525;}

#header{position:relative;height:175px;background:#009;}

#logo{width:180px;height:105px;position:absolute;top:45px; left:45px;background:#0F3;display:block}

#content{padding:20px;background:#333;overflow:hidden;}

#content_container_left{width:70%;float:left;background:#930;}

#content_container_right{width:30%;float:left;background:#9C0;}

#advert{background:#099;height:175px;}

#caption{background:#666;}

#navigation{ position: absolute; top: 77px; right: 20px; text-align: right;background:#F66;}

#navigation a{padding: 7px 20px 7px 20px;text-decoration: none;}

#footer{height:75px;background:#966;}

@media screen and (min-width: 150px) and (max-width: 500px)

{

#header{height:50px;}

#logo{top:3px;left:25px;height:38px;width:127px;}

#content_container_left{width:inherit;float:none;}

#content_container_right{width:inherit;float:none;}

#navigation{position:inherit;width:100%;display:block;padding: 15px 0px 1px 0px;text-align: left;}

#navigation a{padding: 7px 10px 7px 10px;display: block;margin: 10px auto;;background:#CCC;}

#advert{height:100px;}}

@media screen and (min-width: 501px) and (max-width: 800px) {

#header{height:90px;}

#logo{top:20px;left:25px;width:90px;height:55px;}

#navigation{top:30px;}

#advert{height:150px}

}

 

and a screenie of the problem:

Edited May 22, 2012 by gffects

[falkencreative]

I can't really tell without looking at your code, but I know that unordered lists have margins and padding set by default. Have you made sure to reset the margins/padding on the #navigation ul?

[gffects]

Haha I knew it would be something simple forgot to add my resets to the css although the next prob is IE doesn't work with it ?

[falkencreative]

I think you'll need to clarify what issue you are having with IE, and which version of IE you are testing in.

[gffects]

the problem is that any IE less than 9 will not recognise the @ media code is there a way around it?