我给Susy设置的元素span-column()mixin to，不服从它。它们稍微错位了。如何实现 HTML 元素的完美对齐？
完整网站错位的屏幕截图
Detail : <header> and <nav>错位
Detail : <section class="main">错位
这是我的 Sass 代码
@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>
