Circle around inline number - html

Question

I'm trying to create a circle border around a number like so:
But so far all my attempts have resulted in an oval:
Codepen to see it live
SCSS code so far
$browser-context: 16;
#function em($pixels, $context: $browser-context) {
#return #{$pixels/$context}em;
}
body {
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: 'PT Sans', sans-serif;
background: #e5dde1;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.header-nav {
background-color: #ff4c61;
color: white;
font-family: 'Oswald', sans-serif;
}
.category-nav ul {
background-color: #212d5b;
color: #ff4c61;
display: flex;
justify-content: space-evenly;
}
.category-nav a {
font-size: em(34);
text-decoration: none;
}
.category-nav .circled {
border-radius: 50%;
width: em(12);
height: em(12);
padding: em(4);
border: em(1) solid #ff4c61;
}
HTML:
<header class="header-nav">
<h1> APP</h1>
</header>
<nav class="category-nav">
<ul>
<li>A</li>
<li>B</li>
<li>C <span class="circled">3</span></li>
</ul>
</nav>
I been experimenting different solutions so far and I think the problem comes mostly from the fact that container of the number is an inline element (span). Whenever I switch the class .circled to a div instead or set the display to block, I get a perfect circle but then the number is pushed out and it breaks the flex layout. I wonder if there's any way to get the circle to work with a span?

Answer 1

For your .circled class you need to add the following styles:
.category-nav .circled {
...
line-height: em(12); /* needs to match the height */
display: inline-block; /* needs to not be an inline element */
text-align: center; /* center the character*/
}

Answer 2

You could make it an inline-block. Adding this to your example worked for me:
display: inline-block;
line-height: em(12);
text-align: center;

Answer 3

Check this answer for more information
$browser-context: 16;
#function em($pixels, $context: $browser-context) {
#return #{$pixels/$context}em;
}
body {
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: 'PT Sans', sans-serif;
background: #e5dde1;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.header-nav {
background-color: #ff4c61;
color: white;
font-family: 'Oswald', sans-serif;
}
.category-nav ul {
background-color: #212d5b;
display: flex;
justify-content: space-evenly;
}
.category-nav a {
color: #ff4c61;
font-size: em(34);
text-decoration: none;
}
.category-nav .circled {
border-radius: 50%;
width: em(12);
height: em(12);
padding: em(4);
border: em(1) solid #ff4c61;
}
.numberCircle {
display: inline-block;
border-radius: 50%;
behavior: url(PIE.htc);
/* remove if you don't care about IE8 */
width: 1em;
height: 1em;
padding: auto;
background: transparent;
border: 2px solid red;
color: red;
text-align: center;
font: 20px Arial, sans-serif;
}
<header class="header-nav">
<h1> APP</h1>
</header>
<nav class="category-nav">
<ul>
<li>A</li>
<li>B</li>
<li>C <div class="numberCircle">3</div></li>
</ul>
</nav>