导航修正了格式化CSS

Question

我试图制作一个响应式设计，所以我试图根据％

制作宽度

这里是一个jfiddle：http://jsfiddle.net/1x3whaat/

html

<div id="header">

<div id="callout">
Call us : 0123 456 7890
Support : 0123 456 7890
support@website.co.uk

</div>
<div id="logo">
    <a href=""><img src="img/logo.png" alt="Logo" title="Logo" /></a>
</div>
<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Solutions</a>



        </li>
        <li><a href="">Consultancy</a></li>
        <li><a href="">Support</a></li>
        <li><a href="">Contact Us</a></li>
    </ul>   


</nav>


<!-- /header -->
</div>

CSS

div#header{
max-width: 1600px;
width: 98%;
position: relative;
background: #ff99ff;

height: 150px;
}

div#header > div#callout {
width: 30%;
position: absolute;
top: 0px;
right: 0px;
background: #99ff99;
font: 4em;
}

div#header > div#logo > a > img {
height: 135px;
}

nav {
margin: 0;
padding: 0;
width: 60%;
position: absolute;
bottom: 0px;
right: 0px;
background: #066;
}

nav > ul {
list-style: none;
margin: 0 auto;
padding-right: 0;
}

nav > ul > li {
float: left;
border-left: 1px solid #c3b371;
border-right: 1px solid #c3b371;
border-bottom: 1px solid #c3b371;
border-top: none;
width: 13%;
}

nav > ul > li > a {
background: #fcf5d2;
display: block;

font-weight: normal;
font-size: 1em;
text-transform: uppercase;
color: #81673d;
text-decoration: none;
text-align: center;
height: 1.5em;
}

nav > ul > li > a:hover, nav > ul > li > a.active, nav > ul > li.active > a {
background-color: #482501;
color: #fff;
}

这是一个如何形象的图像：

这是我希望它看起来像的图像：

我已经尝试过浮动，填充，边距，改变它的导航或ul固定位置，以及更多我不记得的东西。有人可以帮忙吗？

Answer 1

CSS：

nav > ul {
    list-style: none;
    margin: 0 auto;
    padding-right: 0;
    text-align:right;
    padding:0;
}

nav > ul > li {
    display:inline;
    border-left: 1px solid #c3b371;
    border-right: 1px solid #c3b371;
    border-bottom: 1px solid #c3b371;
    border-top: none;
    width: 13%;
}

并从display:block;选择器中移除nav > ul > li > a。

JSFiddle