Centering navigation element with CSS

Question

I am trying to center the .site-nav ul li in the .site-nav ul but have not been successful. I've tried align-content, width:100%, margin: 0 auto, text-align. I am relatively new to CSS, a few months, and this is my first time posting a question here. This is the link to my codepen: https://codepen.io/darenjm/pen/eRpNEV

.clearfix:after{
content:"";
display:block;
clear:both;
}
.wrapper{
width:90%;
margin:0 auto;
}
.site-logo{
text-align:center;
padding: 20px 0 10px 0;
}
.site-nav{
background:#af2922;
}
.site-nav ul{
background:#efedee;
padding:0;
margin:0;
}
.site-nav > ul ul{
position:absolute;
}
.site-nav ul li{
background:#ecc019;
list-style:none;
}
.site-nav ul li a{
display:inline-block;
width:100px;
padding:5px 10px;
text-decoration:none;
}
.site-nav ul li:hover > a{
background:rgba(255,255,255,0.6);
}
nav > ul > li{
float:left; 
}

Answer 1

You can use flexbox, just add this rule:

.site-nav > ul{
  display:flex;
  justify-content: center;
}

https://codepen.io/anon/pen/bRVdXr

Answer 2

You can use inline-block on the li's, then text-align: center on the parent

.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
.wrapper{
    width:90%;
    margin:0 auto;
}
.site-logo{
    text-align:center;
    padding: 20px 0 10px 0;
}
.site-nav{
    background:#af2922;
}
.site-nav ul{
    background:#efedee;
    padding:0;
    margin:0;
  text-align: center;
}
.site-nav > ul ul{
    position:absolute;
}
.site-nav ul li{
    background:#ecc019;
    list-style:none;
}
.site-nav ul li a{
    display:inline-block;
    width:100px;
    padding:5px 10px;
    text-decoration:none;
}
.site-nav ul li:hover > a{
    background:rgba(255,255,255,0.6);
}
nav > ul > li{
    display: inline-block;
}
.block{
    height:50px;
    background:#ddd;
}






    
    
    
    
    
    
    

<div class="header">
  <div class="wrapper">
    <div class="site-logo">
      <img src="" alt="" class="logo" width="">
    </div>
    <nav class="site-nav">
      <ul class="clearfix">
        <li><a href="#">Home</a></li><li><a href="#">Projects</a>
          <ul>
            <li class="sub-back"><a href="#">Santa Marta</a></li>
            <li class="sub-back"><a href="#">Barranquilla</a></li>
            <li class="sub-back"><a href="#">La Dorada</a></li>
          </ul>
        </li><li><a href="#">Customers</a></li><li><a href="#">Partners</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <!-- .site-nav -->
    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
    <div class="block"></div>
  </div>
  <!-- .wrapper -->
</div>
<!-- .header -->

You could also use display: flex; justify-content: center on the parent and remove the float on the li

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.wrapper {
  width: 90%;
  margin: 0 auto;
}
.site-logo {
  text-align: center;
  padding: 20px 0 10px 0;
}
.site-nav {
  background: #af2922;
}
.site-nav ul {
  background: #efedee;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.site-nav > ul ul {
  position: absolute;
}
.site-nav ul li {
  background: #ecc019;
  list-style: none;
}
.site-nav ul li a {
  display: inline-block;
  width: 100px;
  padding: 5px 10px;
  text-decoration: none;
}
.site-nav ul li:hover > a {
  background: rgba(255, 255, 255, 0.6);
}

.block {
  height: 50px;
  background: #ddd;
}

<div class="header">
  <div class="wrapper">
    <div class="site-logo">
      <img src="" alt="" class="logo" width="">
    </div>
    <nav class="site-nav">
      <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <!--
-->
        <li><a href="#">Projects</a>
          <ul>
            <li class="sub-back"><a href="#">Santa Marta</a></li>
            <li class="sub-back"><a href="#">Barranquilla</a></li>
            <li class="sub-back"><a href="#">La Dorada</a></li>
          </ul>
        </li>
        <li><a href="#">Customers</a></li>
        <li><a href="#">Partners</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <!-- .site-nav -->
    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
    <div class="block"></div>
  </div>
  <!-- .wrapper -->
</div>
<!-- .header -->