Can't get drop-down menus to center with the top menu…???

My blog is https://www.gnarledcarrots.com
I’m using WordPress 4.5.1

The drop-down menus at the top of my page aren’t centered. The spacing between the menus at the top are fine. However, when you hover over the menus, the drop-down menus aren’t centered with the top menu.

It’s particularly bad when you look at the Blog menu:

“Blog” looks fine. It’s centered between “Recipes” and “Tips and Tricks.” When you hover over “Blog,” though, the drop-down menu isn’t centered with “Blog.” Rather, it drops down to the right of the main menu.

All of the dropdown menus are centered within themselves (i.e. “Airstream,” “Chickens,” and “Garden” are all centered with one other). However, the menu (“Blog”) isn’t centered with the drop-down menu (“Airstream,” “Chickens,” and “Garden”).

I’m not sure which menu coding alters the way the menus align with one another and tried tweaking a couple of them without any success. I’m starting to wonder if I’m missing coding…?

Please help!

Within style.css my menu coding is:

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
	padding-top: 4px;
	}

nav ul {
	position: relative;
	padding: 0;
	border-radius: 0;
	display: inline-table;
}

nav ul:after {
	content: ""; clear: both; display: block;
	}

nav ul li {
	float: left;
}

	nav ul li a {
	display: block;
	}

nav ul ul {
    background: none repeat scroll 0 0 #292929;
    position: absolute;
    width: auto;
}
	nav ul ul li {
	float: none;
	position: relative;
	}

	nav ul ul li a:hover {
	background: #636363;
			}

nav li {
  position: relative;
}