Element ignores container element filling

Question

I have the following HTML / CSS code:

<div id="container" style="padding:5px; width:600px;"> <div id="panel"> <a style="padding:5px; color:#ffffff; background-color:#000000;">Page 1</a> <!-- Other anchor elements --> </div> <!-- Other panels --> </div> 

I am trying to understand why the #panel element #panel conveniently located inside the #container ; obeying the rules of filling, while filling the anchor element inside the #panel overlaps the #container . Can anyone argue why this is so, and at the same time, perhaps suggest a fix?

Answer 1

I think because its inline element does this happen, if you change its display to inline-block , the indentation no longer overlaps. Demo

Answer 2

@Musa is correct, the element binding element must be set to display:inline block; or display:block and set the width.