How to give padding to content inside a outline border

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

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>

Answer 2

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>