在我与Susy布局奇怪的错位(Weird misalignment in my Susy layou

元素我设置超对称span-column()混入到，不服从它。他们曾经错位非常轻微。如何实现我的HTML元素的完美对齐？

完整的网站错位的屏幕截图

详情： <header>和<nav>失准

详情： <section class="main">失准

这里是我的萨斯代码

@import compass
@import susy
@import normalize


/* Susy Settings */


$total-columns  : 5             
$column-width   : 4em            
$gutter-width   : 1em            
$grid-padding   : $gutter-width  

$desktop : 12

/* Susy-grid-background override to draw out horizontal lines */

=susy-grid-background       
  +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true)


$base-font-size: 18px
$base-line-height: 30px
+establish-baseline

ul
  background-color: rgba(1, 0, 50, 0.1)

li
  background: rgba(200,50,0,.2)
  text-align: right

a
  background: rgba(0,220,0,.2)
  display: block

h1
  +adjust-font-size-to(90px)
  +adjust-leading-to(4, 90px)
  +leader(2, 90px)
  background: rgba(0,20,200,.3)


h1#logo
  +adjust-font-size-to(30px)
  +adjust-leading-to(2, 30px)
  +leader(0, 30px)

h2
  +adjust-font-size-to(25px)
  +adjust-leading-to(1, 25px)
  background: rgba(250,250,0,.2)


p
  +leader(1)
  +trailer(1)
  background: rgba(0,220,0,.2)


.page, header, .pagenav, .main, .pagefoot
  +transition(all .3s ease)

.page                                
  +container($total-columns, $desktop)
  +susy-grid-background



/* BREAKPOINTS */

+at-breakpoint($desktop)
  .page
    +susy-grid-background
  header
    float: left
    +span-columns(2)
    background: rgba(250,0,0,.2)


    h1#logo a
      +hide-text
      float: right
      +span-columns(2, 2)
      background: rgba(200,10,250,.1)

    .pagenav
      clear: both
      +span-columns(2, 2)
      background: rgba(0,140,250,.3)

  .main
    +span-columns(10 omega,12)
    background: rgba(0,240,200,.3)

  .pagefoot
    background: rgba(45,0,120,.3)
    +span-columns(12,12)

而我的HTML

<!DOCTYPE html>
<html>                      
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link href="stylesheets/style.css" media="screen, projection" rel="stylesheet" type="text/css" />

  <title>Home</title>

</head>

<body>
  <div class="page">
    <header>
      <h1 id="logo">
        <a href="">
            "Designer Name"
        </a>
      </h1>
      <nav class="pagenav" role="navigation">
        <ul>
          <li>
            <a href="">
              <h2>
                work
              </h2>
            </a>
          </li>
          <li>
            <a href="">
              <h2>
                blog
              </h2>
            </a>
          </li>
          <li>
            <a href="">
              <h2>
                about
              </h2>
            </a>
          </li>
          <li>
            <a href="">
              <h2>
                contact
              </h2>
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <section class="main">
      <h1 id="heading">
        Main Title
      </h1>
      <p>
        smappppin conta naoiw nasdhi aaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdaushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdushd kajsdiuashdu ahsdo ahosdijaosidj oaisjd ojofjidfj odijf odjf odijfodjfo dijfo djfo jdofijdoifj odhfi dhsjkenbrou snfco784ijrh8heuhfs kdjf ksdpppf
      </p>
      <h2>A New Title</h2>
      <p>
        Vertical grids are a compas feature. See the compass docs for baseline grid background. You won't be able to show both grids at once on the same element without a bit more work. Maybe we should integrate that somehow in Susy 2.0? Vertical grids are a compas feature. See the compass docs for baseline grid background. You won't be able to show both grids at once on the same element without a bit more work. Maybe we should integrate that somehow in Susy 2.0?
      </p>
      <p>AJASd nasdi oasd iabjds iausbd kasbd oiausbdi absdiuabsidb aisudb iasbd iabsdi basid baisdb jhavsdjh agvsdk abs klda;is d'asijd AOSDU IASD IAsid hyi/aisD haH siD HAISHd IAhdA sid aSIHD aihsf ihgiuyerhf 9f3kuhsdffdsfsd
      </p>
    </section>
    <footer class="pagefoot">
      <p>Made by</p>
    </footer>
  </div>
</body>
</html>

与Susy网格是（默认）在里面液体。所有液体从电网一定量的苦子像素四舍五入在浏览器端。这就是说，你主要看到的是子像素的背景网格，它通常比实际元素，四舍五入取整恶化。这是在文档指出 -电网的背景是一个粗略的指南，而不是一个像素精确的标尺。

与Susy还具有隔离选项，可用于从停止子像素误差复合。