Practicing some css to get things a bit more centered, especially with dynamic elements. So the code below is my test page.

I ran it here on firefox, chrome and edge; the spans have padding that pushes outside the containing div/span. I would have thought the container would expand to cover the contents, but it didn't.

Messing with display sometimes gets it to work, but then seems to negate the center.

Probably simple, but can someone explain why or give a link to a site that explains why ?

Code:
<html>
<head>
<style>

* {
/* force the box to be the box... */
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	
}

.borderblk {
	border: solid 1px black;
}
.borderblue {
	border: solid 1px blue;
}
.borderred {
	border: solid 1px red;
}
.spaceme{
	margin-top: 8px;
}
.padme {
	padding: 10px;
	box-sizing : border-box;
}
.circleme{
	width:52px;
	height: 52px;
	border-radius:26px;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}

.testcenter1{
	text-align:center;
	vertical-align: middle;
	margin: 0 auto;
}
</style>
</head>
<body>

<div class="borderblk spaceme ">
<div class="borderred testcenter1">
<span class="borderblue padme ">some content</span>
<span class="borderblue padme ">some content</span>
</div>
</div>

<div class="borderblk spaceme">
<span class="borderred testcenter1">
<span class="borderblue padme">some content</span>
<span class="borderblue padme ">some content</span>
</span>
</div>

<div class="spaceme">
<span class="borderblk circleme">02</span>
</div>


</body>
</html>