Problemer med mobil siden

Hej Udvikleren.dk


Det er sådan lige pt nu og her arbejder jeg på at få min hjemmeside til mobil også. Hvis du gå ind på din hjemmeside så klik her: Mebe.dk

Du kan se mit probleme her:

http://billedeupload.dk/?v=gdSq5.png

Det som problmet er det er sådan at

Den blå boks som er i toppen skal gå helt ud
Den rød skal gå også gå hele vejen over til den anden side:


Min kode er:

 @media only screen and (max-device-width: 480px) {
     #wrapper {
         width: 100%;
     }
     #content {
         width: 100%;
     }
     #slideshow {
         display: none;
     }
     #logo {
         width: 280px;
         padding: 5px;
         margin: 5px;
     }
     #banner_top {
         display: none;
     }
     .i_box_content {
         float: left;
         clear: both;
     }
         .artikler_indhold {
         clear: both;
         width: 100%;
     }
 }

det her er til mobil:

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/style/style-mobil.css" />

i_box_content
er der hvor jeg har lavet en blå boks.

artikler_indhold
det er til den rød boks.


Det som problemet også er:

jeg kan gå fra side til side. altså wrapper bestemmer altså ikke om man kan gå længere eller fra side til side. med andre ord "wrapper" er ikke tilpasse til den.



Skulle bare gøre sådan her;

 @media only screen and (max-device-width: 480px) {
     #wrapper {
         width: 90%;
         padding: 5px;
     }
     #content_box {
         width: 90%;
         padding: 10px;
     }
     #slideshow {
         display: none;
     }
     #logo {
         width: 280px;
         padding: 0;
         margin: 0;
     }
     #banner_top {
         display: none;
     }
     .i_box_content {
         float: left;
         clear: both;
     }
     .artikler_indhold {
         clear: both;
         width: 300px;
         float: left;
         border: 0px;
     }
     #mobil li a{
         font-size: 18px;
     }
     #mobil li{
         padding: 1.2%;
         clear: both;
         /* Background & effects */
         background: #494949; /* Background for Internet Explorer 9 and older browsers */
         background: -webkit-linear-gradient(bottom, #444, #555); /* Background for Chrome & Safari */
         background: -moz-linear-gradient(bottom, #444, #555); /* Background for Firefox */
         background: -o-linear-gradient(bottom, #444, #555); /* Background for Opera */
         background: -ms-linear-gradient(bottom, #444, #555); /* Background for Internet Explore 10+ */
         border: 0;
         width: 98%;
     }
 }