I have tried using display:block; and display:inline; to get my nav to align but it does not seem to be budging. What simple thing have I missed?
<nav id="head-nav">
<ul>
<li class="first current">
<a href="http://commercial.co.nz/index.php/home">Home</a>
</li>
<li class="last">
<a href="http://commercial..co.nz/index.php/contact">Contact</a>
</li>
</ul>
</nav>
#head-nav{
display:block;
float:right;
width:710px;
border:1px solid red;
margin:45px 0 0 0;
}
#head-nav ul li a{
display:block;
height:25px;
width:60px;
background-color:cyan;
}
To align them in the same row you need to add float:left; to the css for li
Plus this may not render properly in some older or non-html5 browsers. You should add conditional statements or use <div> tags instead.