My centered heading is not quite centered! (Twenty Twelve)

Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

Thanks, yes I am already doing that

Then unless you provide a link to a page demonstrating the problem, no one will be able to offer much in the way of assistance.

That’s why I did include a link in my OP.

Sorry. Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

Yes I have done that, and have included code in the child theme which HAS centered the text – but it still seems slightly, but noticeably off, centre. I’m afraid I’m not well versed enough in code to know how to rectify this.

Thanks

You need to edit the margins on your .nav-menu li elements – currently they have margins on the right only. Equal them out on the right and left and you’ll be golden.

Ah thankyou! Not sure where to look to find these margins however, could you advise?

What are you using to edit the CSS?

In the CSS file look for .main-navigation li around line 1500 and split the margin

Hi, I’m using the WordPress editor and using a child theme.

Here is the code from line 1500 relating to the menu… could you advise what I need to fix (in the child theme) to sort the margin out?

.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover,
	.main-navigation li a:focus {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul,
	.main-navigation .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover,
	.main-navigation li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;

Thanks!

Hi, still hoping for advice on this one if possible ??