Header size and Logo size on Header

The menu is showing up like that because your logo area is currently set at 360px width, which means there isn’t enough space inside the 1200px area for both the logo and your nav (due to how many items you have in your menu).

Since the width of your logo seems to actually be around 180px (visually), I would change your CSS to that width so you can remove the extra space. The extra space is what is causing the menu to fall off to the side. You can change this width around line 1199 in your style.css file –

.title-area {
    float: left;
    padding: 25px 0;
    width: 360px;
}

Just change 360px to around 180px and it should fix it.

Example: If you have a logo that is 400px wide, and the nav is around 900px wide, then the nav would fall off to the side since 400 + 900 = 1300. The entire header area is 1200px, so anything that exceeds beyond that will cause that to happen.

Let me know if that helps.

It looks like you’ve already added some space in your Nav. If you want to add more, check out line 1282 in your CSS where you’ve added this –

.genesis-nav-menu a {
	color: #fff;
	display: block;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 2px;
	padding: 75px 17px;
	padding-top: 113px;
	padding-bottom: 23px;
	padding-left: 11px;
	text-transform: uppercase;
}

You can adjust your padding here to increase/decrease space. Just make sure not to forget what I mentioned earlier about the 1200px space. If your Nav/Menu is too wide with your logo, then it won’t fit inside the header area. So make sure your padding isn’t too much to cause the Nav to get pushed down.

You can add padding/space to the sides of each menu item by changing the padding on line 1292 –

.genesis-nav-menu a {
	color: #fff;
	display: block;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 2px;
	padding: 75px 17px;
	padding-top: 113px;
	padding-bottom: 23px;
	padding-left: 11px;
	text-transform: uppercase;
}

I would remove some of the padding code that you have above and instead add it like this –

padding: 113px 17px 23px 11px;

The padding works in this order – Top - Right - Bottom - Left So to add more space on the sides, change the 17px and the 11px (right and left). I would make them both the same so everything can be even.