Inner span overflows past outer span

Question

I need your help,

I can't seem to figure out as to why my inner span overflows past my outer span?

Here is a pic of the problem:

Here is the HTML and CSS markup:

<span style="border: 1px solid blue; display:inline-block; position: relative; width: 100%;">
     <span style="display:inline-block; border:1px solid red; text-align: right; width:100%">
       test
     </span>
</span>

Answer 1

span{
    box-sizing: border-box;
}

<span style="border: 1px solid blue; display:inline-block; position: relative; width: 100%;">
     <span style="display:inline-block; border:1px solid red; text-align: right; width:100%">test</span>
</span>

apply this css rule:

span{
    box-sizing: border-box;
}

border-box : The width and height properties (and min/max properties) includes content, padding and border, but not the margin

You can find more about box-sizing here