Question

how can i centre the list items in the nav bar, list items are of varying width?
thanks

<div class="wrapper" style="width:100%">
<div class="nav" style="width:100%">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">PROJECTS</a></li>
        <li><a href="#">TOURS</a></li>
        <li><a href="#">VOLUNTEER</a></li>
    </ul>
</div>
</div>

Answer 1

try

.nav ul{text-align:center;}

if that doesn’t work, try

.nav ul {width:100%; overflow:hidden;}
.nav ul li{position:relative;margin:0px auto;}