The extra 12px is being added by the parent theme – take a look at line 2274 of the style.css of twentyeleven. In your child theme you’ve only specified the top padding as 0 so in effect the parent padding for right, bottom and left as still being carried over.
You could carry over the padding: 2.2em 0.5em; to your child theme and then adjust them to your needs. When using the element inspector uncheck the box next to the above padding element to see the effect. You could remove the padding altogether or adjust your width to take the padding into account and this will return the actual width you inspect the element again.