Twenty eleven theme appearing wider than set

https://osbornerestoration.co.uk/wp-content/themes/twentyeleven/style.css

#main #content {
		margin: 0 7.6%;
		width: auto;
	}

Try tweaking those values?

No! Do not edit the Twenty Eleven theme. First create a child theme for your changes. Or install a custom CSS plugin.

sorry the gap is down the right side. Dont know if that makes a difference Rajesh, I will continue to tweek these values in main and content, so far to no avail.

cheers

yeas it is a child theme esmi

Hi Rajesh so far these changes dont seem to effect things, the margin values center the content, but the width value seems to effect nothing. Its like the site naturally makes itself slightly wider than the screen.

Have you tried using Firefox with the Firebug add-on for this kind of CSS troubleshooting? Or whatever developer tool is available in your web browser? These tools can really reduce the amount of time spent trying to pin down a particularly elusive piece of CSS.

yeah I have been using chrome with inspect element, but cant seem to make that gap on the right go away. It’s like there is extra space after the width of page, content, main, nav, etc..strange.

I have customised the header width and height, in the php.

I can’t see a gap but then this monitor only goes to 1600px wide. I did notice that you have a couple of markup and CSS errors (check the entry for your child’s stylesheet) that could cause issues in some browsers.

ok thanks i’ll look into all that, looks like I was sloppier than I thought. Cheers

I think I found the problem. You don’t need the max-width: 2000px; on line 264 of your style sheet. Remove that and you should be fine.

UPDATE:
Actually, removing that line messes up the sizing in lower resolutions.

Okay, I _have_ found it now:

Find ‘div class=”skip-link”‘ in Chrome’s Inspect Element.
Look at the ‘a class=”assistive-text”‘ in that Div. It has extra padding that’s messing you up.

If you uncheck the padding you’ll see the problem still isn’t fixed, BUT if you scroll down a bit further in the Matched CSS Rules, you’ll see that now another Padding has become Checked. Uncheck this again and it fixes your issue.

You just need to do some tweaking because you actually need some of that padding for your menu.

Nice one dabhandconz, that worked out nicely. very much appreciated.