Centered Menu

by kyleshevlin

HTML

<nav>
    <ul>
        <li><a>menu</a></li>
        <li><a>menu</a></li>
        <li><a>menu</a></li>
        <li><a>menu</a></li>
    </ul>
</nav>

CSS

* {
   margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

nav {
    width: 100%;
    float: left;
    position: relative;
    overflow: hidden;
    border: 1px solid black;
}

ul {
    list-style: none;
    float: left;
    position: relative;
    left: 50%;
    border: 1px solid red;
}

li {
    float: left;
    position: relative;
    padding: 1em;
    right: 50%;
    border: 1px solid green; 
}