How do I stop my image from being offset to the right in wordpress?

Question

I have an image on this page: http://rowanibbeken.co.uk/?page_id=422 that I want to be centered but for some reason it is offset slightly to the right. My HTML is as follows:

<p style="text-align: center;">
    <img class="wp-image-423 aligncenter" style="border: 5px solid white;" alt="Under the     Bridge-2 medium" src="http://rowanibbeken.co.uk/wp-content/uploads/2014/01/Under-the-Bridge-2-medium.jpg" width="965" height="641" />
</p>

But it still doesn't seem to be properly centered. What could the problem be?

Answer 1

This is because the border width is being added onto the width calculated from the percentage. You will want to add the following styles to your image:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

This will cause the border to be included in the width calculations.

I recommend putting these in a stylesheet rule, rather than inline, but both should work.