Want to spread out my menu items more

Hi if you can see my site I have my menu items with borders to make them like buttons that are: “Upload Graphic Files” , “Order Plans & specs” and “Request Messenger”. I want to spread them out more from eachother but when I try to with something like this

nav#mainnav > div > ul.menu > li.menu-item {

it results in them going over eachother like it going to a new line. How can I do this? Thanks.


Hello there,

The menu size looks bigger that doesn’t provide enough space if items are too many. I feel like this is the source of the issue. What do you think? However, try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard and see if it helps.

    @media only screen and (min-width: 1025px) {
      .site-header .col-md-4 {
        display: none;
      .site-header .col-md-8 {
        width: 100%;
      #mainnav {
        float: none;
      .mainnav ul.menu {
        display: table;
        margin-left: auto !important;
        margin-right: auto !important;
        border: 1px solid yellow;


Hi Kharis, I made the change live on my website but it didn’t really help spread things out anymore just pushed things down. Can you take a look? Thanks


I am sorry, it’s a bit complicated for me to correct the code because top and left style rules are applied (see on the above screenshot). Would you please remove them all first? Let me know once you’re done.


Alright Kharis I have removed both of those can you take a look again? Thank you