Q:

How to make a percentual width to include the padding? border-box seems not to be working

I want to make a percentage width to include the padding. That is, if my div width is 50% or 500px, it should be 250px regardless of the padding.
Here's the fiddler: https://jsfiddle.net/sxzxbe2t/
As you can see here...

... the kitty is still 290px wide while it should be 250px. I'm using box-sizing: border-box; to no avail.
Any idea?
EDIT
I need the image to keep being 100% inside the div, unless there's another way for it to occupy the entire width.

A:

Seems like you still have to add vendor prefixes Fiddle
.container .image-wrapper {
    width: 50%;
    padding: 0 20px; 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;    
    box-sizing: border-box;  // this makes no difference
}

