Hi, My contents not centering on the page, when i test it on Iphone simulator. I managed to fit my about section but web and print parts are does not expanding full width. i used grid to align it. -HTML- <div class="onerow"> <div class="section"> <div class="col4">

      <div class="web"> 
        <h2>Web</h2>
          <p>Design Website from Scratch</br>
          Resposive Web Sites </br>
          Mobile Sites/Applications</br>
          Redesign Web Pages </br>
          Work on Templates </br>
          Photoshop to HTML/CSS</p>
      </div>
    </div>

      <div class="col4">
        <div class="print">
          <h2>Print Design</h2>

          <p>Brochures</br> 
          Business Cards</br> 
          Logos </br>
          Invitations</p>
      </div>
    </div>

      <div class="col4 last">
        <div class="photo">
          <h2>Photo</h2>
          <p>Prepare photos for print</br> 
          Photo manipulation </br>
          Restore old Photos</p>
      </div>

-CSS- /Iphone ---/

@media only screen and (max-width: 480px) { .col1 { width: 5.5%; } .col2 { width: 14%; } .col3 { width: 22.5%; } .col4 { width: 31%; } .col5 { width: 39.5%; } .col6 { width: 48%; } .col7 { width: 56.5%; } .col8 { width: 65%; } .col9 { width: 73.5%; } .col10 { width: 82%; } .col11 { width: 90.5%; } .col12 { width: 99%; margin: 0 auto; }

body { margin:0; padding:0; } h1 { font-family: 'Julius Sans One', sans-serif; font-size: 2em; text-align: center; text-transform: uppercase; } ul .nav { margin-bottom: 5px; }

.blue { width:100%; font-size: 2em; text-align: center; margin-bottom: 5px; margin-left: 45px; background:#00adec; border-radius: 125px; opacity: 0.4; padding:20px 50px; } .red { width:100%; font-size: 2em; text-align: center; margin-bottom: 5px; background:#ff0303; border-radius: 125px; opacity: 0.4; padding:20px 50px; }

.orange { width:100%; font-size: 2em; text-align: center; background:#3a3838; border-radius: 125px; opacity: 0.4; padding:20px 50px; }

about {

width:100%; text-align: justify; } .portrate { display: none; } .web p{ margin:0; }

.photo { display: none; } .imageRow .single { float: left; margin:5px; } .webDesign img { width: 100%; } }

this is only part containing Web and print sections