WordPress 480px Responsive Layout

gistfile1.scss

/*
 * 480px layout supports: ( max-width 480px )
 *
 * 10px | 460px | 10px
 * Posts are not floated left, can be resized with container eq 460px
 *
 * 10px | 100% ( 460px ) | 10px
 *
 * @required
 *  rem-mixin.scss
 *
 * @assumptions
 *  * { box-sizing: border-box; }
 *  font sizes, margins, & padding all use REMS
 *  widths all use percantage based values
 */

#page {
  margin: 0 auto;
  max-width: 480px;
  width: 100%;
}

#content {
  @include rem(margin, 0, 1);
}

#primary {
  float: none;
  width: 100%;
  .post {
    float: left;
    margin: 0;
    width: 460px;
  }
}

#secondary {
  float: none;
  min-width: none;
  max-width: none;
  width: 100%;
}

gistfile2.html

<!-- This should mimick the typical output of the basetheme structure -->

<div id="page" class="hfeed site">
  <div id="content" class="site-content">

    <section id="primary" class="content-area">
      <article class="post">Article One</article>
      <article class="post">Article Two</article>
    </section><!-- #primary -->

    <div id="secondary" class="widget-area" role="complementary">
      <aside class="widget">Widget</aside>
    </div><!-- #secondary -->

 </div><!-- #content -->
</div><!-- #page -->