保持边距和导航栏“响应”

如标题所示，我正在尝试使页边距和导航栏保持统一或对上述元素做出响应。两者都在无序列表中。显然我的高度为130像素是问题，但除px之外，我似乎无法使其适用。我还想向导航栏的hiehgt添加％，但是当我这样做时，所有边距似乎都消失了。

我知道我很可能会为我的垫片做一次讲座，但是已经讨论过了，我还没有找到一种同样有效的替代方法。请不要建议我使用margin-left。

http://codepen.io/Compton/pen/zmlAv

#content ul.icons {
    width:100%;
    height:130px;
    list-style:none;
    float:left;
    padding: 0;
    margin: 40px 0 0 0;
    position: relative;
}

#content ul.icons li {
    float:left;
    width:8.03%;
    height:130px;
}

#content ul.icons li a {
    width:100%;
    height:100%;
    display:block;
    position: relative;
}

#content ul.icons li.option-1 a {
    background-image:url(http://i.imgur.com/dfYAoPM.png);
    background-repeat:no-repeat;
    background-size:100%;
}

#content ul.icons li.option-1 a:hover {
    background-image:url(http://i.imgur.com/dfYAoPM.png);
}

#content ul.icon-text {
    width:100%;
    height:40px;
    list-style:none;
    float:left;
    padding: 0;
    margin: 1% 0 0 0;
    background-color:#f37028;
    text-transform:uppercase;
    text-align:center;
}

#content ul.icon-text li {
    float:left;
    width:8.03%;
}

#content ul.icon-text li a {
    width:100%;
    height:100%;
    display:block;
    position: relative;
    margin:11px 0 0 0;
    font-family: 'maven_proregular', Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size:1.2em;
    color:#FFF !important;
}

#content ul.icon-text li a:link, a:active, a:visited {
    color:#FFFFFF !important;
    text-decoration:none !important;
}

#content ul.icon-text li a:hover {
    color:#000000 !important;
    text-decoration:none !important;
}


#content ul li.spacer {
    width:7.29%;
    height:100%;
    display:block;
}

<div id="content">

<ul class="icons">
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
    <li class="spacer"></li>
    <li class="option-1"><a href="" title="Option"></a></li>
</ul>

<ul class="icon-text">
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
    <li class="spacer"></li>
    <li><a href="" title="Option">Option</a></li>
</ul>

</div>