How to give padding to content inside a outline border - html

Question

Here I want to align this inside circle at the left border. As shown in the image by orange lines.
Here is my HTML code for this
<section style="height: 300px;border: 2px solid green;">
<ul id="Name_Section">
<li style=" border: 2px solid blue;">I AM PRAVEEN KUMAR </li>
<li id="logo"></li>
</ul>
</section>
Below is the CSS for this.
Ignore the extra code if there it is.
#Name_Section{
display: flex;
justify-content: space-around;
padding: 30px;
}
#Name_Section li{
list-style: none;
padding: 10px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#logo{
outline: 1px solid rgb(255, 255, 255);
outline-offset: 15px;
background-color: rgb(38, 38, 54);
height: 120px;
width: 120px;
border-radius: 70px;
}

Answer 1

You only need two container for you to reproduce the effect you desire, basically the outer container should have a white border, the inside container containing the text should have a smaller dimension than the outer container. In my example there's a 2em height and width difference to achieve the effect. Both then sould have display: flex;, align-items and justify-content set to center, to align the items inside of them to the center. See the snippet below for your reference.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
height: 300px;
border: 2px solid green;
background: #4A495B;
}
#Name_Section {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.outside {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid grey;
border-radius: 50%;
height: 12em;
width: 12em;
}
.inside{
background: #272636;
color: #fff;
border-radius: 50%;
height: 10em;
width: 10em;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
<section>
<ul id="Name_Section">
<li class="outside">
<p class="inside">I AM PRAVEEN KUMAR </p>
</li>
</ul>
</section>

Answer 2

place the element inside a parent div that own the size, the padding and the border
the parent have a relative position
the logo have an absolute position
you can now move the child where you want in the parent with properties top, bottom, left or right
#logo{
background-color: rgb(38, 38, 54);
border-radius: 70px;
height: calc(100% - 14px);
width: calc(100% - 14px);
position: absolute;
right:0;
top:7px; //the midle of the parent padding
}
.element-border {
position:relative;
border: solid grey 1px;
border-radius: 70px;
padding: 14px;
height: 120px;
width: 120px;
}
<div class="element-border">
<div id="logo"></div>
</div>