Center options in hmenu

Question

How do I get the hmenu options to center on any monitor? (Simple center in css doesn't work on our site). I've tried to research options, but our coding seems a bit complicated.

www.sleepstudymo.com

Thanks in advance.

Don

Answer 1

You need to remove the float: left; from .sleep-hmenuand add text-align: center; on .desktop .sleep-nav:

.desktop .sleep-nav {
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
}
.sleep-hmenu {
    float: left; /*remove this*/
}

Or you can use display: flex; with flex-wrap: wrap; on the .desktop .sleep-nav element and margin: 0 auto on ul.sleep-hmenu:

.desktop .sleep-nav {
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    display: flex;
    flex-wrap: wrap;
}
ul.sleep-hmenu {
   display: inline-block;
   vertical-align: bottom;
   padding-left: 5px;
   padding-right: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
}