Getting padding and margins inside parent's width
<p>I have an elementary problem with my web that is driving me nuts.</p>

<p>Imagine that I have a container div which I set to be <code>max-width 1024 px</code>. Then I have two more divs inside it that are <code>width:50%</code> each of them. I try to add a <code>padding</code> to the insider divs, but then it overflows above the <code>1024 max-width</code> pixels of the container div.</p>

<p>My doubt is, if the <code>padding</code> are like inner-margins, they are part of the element, wouldn't it be supposed to be counted inside that 50% <code>width</code>? In other words, I want <strong>the element + the <code>padding</code></strong> to be 50%, not just the element.</p>

<p>Just to make things clearer,</p>

<p>This is how it looks now :</p>

<p><a href="https://i.stack.imgur.com/TAXr0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TAXr0.jpg" alt="enter image description here"></a></p>

<p>... and this is how it should look. :</p>

<p><a href="https://i.stack.imgur.com/z9Dy2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z9Dy2.jpg" alt="enter image description here"></a></p>

<p>So, what should I do?</p>