Why do my main menu tabs show up on two lines instead of one?
This is happening because of the CSS technique/code being used. Both &lt;li&gt; and &lt;a&gt; have been floated. 

The first WOW item actually contains all the other WOW items as children, and it's reflected in the HTML structure, there is an &lt;ul&gt; inside the WOW &lt;li&gt;. Since &lt;li&gt; is floated but it hasn't been given a specific width, there are some cases that can happen, like this one, that seem a bit odd, but they're just following the code. 

I guess the authors of that theme didn't anticipate the menu might be used in this way, to display two levels of menu hierarchy on one line. 

Usually one level of the menu is displayed in one region, and deeper levels are displayed elsewhere or in a drop-down. 

You could add two Main menu blocks to that region, and set one Block to display Initial visibility level and Number of levels to display to 1 and 1, and the other Block to 2 and 1. This way you'd get WOW and About in one row, but when you visit WOW a second row would appear with all the WOW-subitems. 

If they are meant to always be displayed maybe it makes sense not to have two levels in hierarchy? 

But in the end you can always adjust the CSS to make them display all on one row (you can use CSS edit module to override CSS if you don't have a subtheme): 

.region-primary-menu .menu-item, 
body:not(:target) .region-primary-menu .menu-item {
  float: none;
}




This will make them show on one row since now only anchors are floated. But the margin won't have affect so you'll need to add margin to the anchor elements instead, if you want them separate a bit like before.