Centering ul within a div

#1

I can’t seem to center my ul within a div.

Can someone help me out. I’ve probably just typed something wrong.

https://codepen.io/thelartman/pen/Mvego

#2

There is something wrong with the link that you have attached .code pen shows 404 error.

#3

sorry.

#4

I would make the following changes:

/* these two styles aren't needed now */
/* .menu-items {
  display: inline;
  float: left;
  text-align: center;
  margin-left: 3%;
  padding-right: 3%;
  border-right: 1px solid #322f2e;
}

.menu ul {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  margin-top: 1%;
} */

/* Use these styles instead */
.menu ul {
  list-style: none;
  padding: 0;

  /* this is all you need to center your items */
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu ul li {
  padding: 2px 10px;
}
.menu ul li:not(:last-of-type){
  border-right: 2px solid #322f2e;
}
#5

Cheers mate!

Much appreciated!

#6