title: how to make static page responsive??
body: <p>I am tying to make html file responsive but I have problem that when I change the width to 90%
  it make webpage and make portfolio seaction go to far right and content section to far left with gab between section. what aima trying to do is make web page fixable?
  I add link to fiddle js for may static page 
  <a href="http://jsfiddle.net/aElnajjar/YJA9E/" rel="nofollow">http://jsfiddle.net/aElnajjar/YJA9E/</a></p>
  
  <p>My CSS after I add persent </p>
  
  <pre><code>@@ -1,7 +1,7 @@
   @charset "utf-8";
   /* CSS Document */
  
  -
  +* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
   /*reset css*/
   article, aside, figure, footer, header, hgroup, nav, section { 
          display:block; 
  @@ -17,6 +17,8 @@ article, aside, figure, footer, header, hgroup, nav, section {
          line-height: 20px;
          color: #5F5E59;
          background: url(images/bg_body.jpg) left top repeat;
  +       width: 100%;
  +
  
      }
      a:link, a:active, a:visited {
  @@ -35,28 +37,26 @@ article, aside, figure, footer, header, hgroup, nav, section {
          margin-bottom: 25px;
      }
      #block-twitter {
  -       width: 700px;
  -       height: 60px;
  -       position: relative;
  +       width: 90%;
          margin: 0 auto;
          padding: 20px 200px 0 0;
  +       float: right;
  +       
      }
      #block-title {
  -       width: 900px;
  -       height: 80px;
  -       position: relative;
  -       margin: 0 auto;
  +       width: 90%;
  +       position: right;
          padding-top: 25px;
      }
      #main-content {
  -       width: 900px;
  -       position: relative;
  +       width: 90%;
  +       position: right;
          margin: 0 auto;
      }
      footer {
  -       width: 900px;
  -       position: relative;
  -       margin: 0  auto;
  +       width: 90%;
  +
  +   
          clear: both;
          padding: 30px 0;
          background: url(images/img_star.png) left top repeat-x;
  @@ -73,6 +73,8 @@ article, aside, figure, footer, header, hgroup, nav, section {
      font-style:italic;
      font-size:14px;
      text-shadow: 0 -1px 0 #0000;
  +   width: 90%;
  +
   }
  
   #block-twitter span.tweet-time {
  @@ -301,6 +303,4 @@ section#portfolio {
          box-shadow: 1px 1px 2px #999;
          clear: both;
  
  -   }
  -
  -   /* -------- */
  +   }
  \ No newline at end of file 
  </code></pre>