CSS: Responsive layout

Hoi,

Ik ben bezig met een responsive layout voor rekentalent, maar ik heb nu dus deze media queries:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7

/* Media queries */
@import url(phone.css) (min-width:0px);
@import url(tablet.css) (min-width:481px);
@import url(tablet_high.css) (min-width:641px);
@import url(laptop.css) (min-width:961px);
@import url(desktop.css) (min-width:1025px);
@import url(desktop_high.css) (min-width:1281px);

Als ik op mijn computer het scherm kleiner maak is het zwarte balkje (wat de container word) wel goed. Maar op mijn telefoon staat het balkje niet in het midden er zit een wit vlak rechts.

Screen komt zo.

URL: http://dylaan.nl/rekentalent/

Hoe kan dit oplossen?

toevoeging op 1 mei 2014, 1549:
Of ik maak gewoon in phone.css width:100%...?

Het is mooier om het met procenten te doen, nu verschiet hij elke keer.
Als je het met procenten doet (de width) dan rekt hij vanzelf al mee.

Xjessex schreef:

Het is mooier om het met procenten te doen, nu verschiet hij elke keer.
Als je het met procenten doet (de width) dan rekt hij vanzelf al mee.

Procenten alleen in phone.css?