How to avoid Menu Wrapping in the WordPress Tesseract Theme

I have been building a new, simple website over the last day or two for one of my businesses using the Tesseract Theme, a really great theme for making a nice and simple self hosted WordPress website.

I ran into the problem where my menu items were wrapping onto two lines, even though the items hadn’t used up the full width of the bar and I still have menu items I want to include at this point. Here’s what it looked like:

After searching for the last few hours for a quick fix no viable solution really showed its face so I put my limited knowledge of CSS to the test and came up with this:

#masthead {
padding-top: 10px;
padding-bottom: 10px;
}

#site-banner-left {
width: 100%;
}

Believe it or not it seemed to do the trick:

Now the menu makes the whole website look more sleek and professional.

To insert the code into the CSS follow these instructions:

Log into WP-Admin > Appearance > Customise > Additional CSS

Here’s the website.

Let me know if it’s helped you out in the comments below.