Add a distant circle around a CSS image

Question

I need to circle around a div with photo, however my image is not centering on the expected circle, having this result:

I tried to do it that way:

#avatar {
    margin: 0 auto;
    background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
    width: 70px;
    height: 70px;
    background-size: cover;
    background-position: top center;
    border-radius: 50%;
}

.circle {
    margin: 0 auto;
    display: block;	
    border: 2px solid rgb(161,196,66);
    border-radius: 50%;
    height: 80px;
    width: 80px;
}

<span class="circle">
     <div id="avatar"></div>
</span>

Answer 1

Guy even right would be not wearing one span as container for the image and yes use a div which is already an element of the block, because it makes no sense to put display:block in a span

Of any shape with display:flex in the span vc can align in the center independent of the width and height of the elements using justify-content: center; align-items: center;. There are other ways to do, with position:absolute etc, but this I find the most practical...

See the code I used to get this image above:

#avatar {
	margin: 0 auto;
	background-image: url('http://i.stack.imgur.com/Dj7eP.jpg');
	width: 70px;
	height: 70px;
	background-size: cover;
	background-position: top center;
	border-radius: 50%;
}

.circle {
	margin: 0 auto;
	display: block; 
	border: 2px solid rgb(161,196,66);
	border-radius: 50%;
	height: 80px;
	width: 80px;
	display: flex;
    justify-content: center;
    align-items: center;
}

<span class="circle">
	<div id="avatar"></div>
</span>