spanタグをbuttonタグで囲んでますがその2つがずれます。

前提・実現したいこと

ハンバーガーメニューを作りたいです。
三の下にbackground-colorで丸をつけたいです。（border-radius:50%)そしてそれは左右中央に揃えたい。
↓
またその2つをセットでpositionをつけてトップの左上につけたいです。

該当のソースコード

<div class="icon">
		<button class="nav-btn">
			<span></span>
			<span></span>
			<span></span>
		</button>
	</div>

.icon{
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-color: red;
	z-index: 20;
}
.nav-btn{
	-webkit-appearance:none;
	appearance:none;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 110;
	width: 47px;
	height: 33px;
	border: none;
	background-color: #fff;
	
}
.nav-btn span{
	position: absolute;
	display: block;
	width: 100%;
	height: 3px;
	background-color: #592d06;
	transition: all 0.5s;
}

.nav-btn span:first-of-type{
	top: 0;
}
.nav-btn span:nth-of-type(2){
	top: 15px;
}
.nav-btn span:last-of-type{
	bottom: 0;
}
.nav-btn.active span:first-of-type{
	transform: rotate(45deg);
	top: 10px;
}
.nav-btn.active span:nth-of-type(2){
	opacity: 0;
}
.nav-btn.active span:last-of-type{
	transform: rotate(-45deg);
	bottom: 10px;
}

発生している問題・エラーメッセージ

spanをbuttonタグで囲んでいるのですが、spanの三とbuttonタグにつけているbackground-color少しずれます。そのせいで、その下につける〇の背景の左右中央に三を乗せることができません（ずれます）

※buttonタグにつけているbackground-colorは本当はredですが作るまでにわかりづらいので#fffにしています。ご参考までに

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1.nav-btn{
2    -webkit-appearance:none;
3    appearance:none;
4    position: relative;
5    top: 50%;
6    left: 50%;
7    transform: translate(-50%, -50%);
8    z-index: 110;
9    width: 47px;
10    height: 33px;
11    border: none;
12    background-color: #fff;
13padding: 0;/* ADD */
14}
15```**動くサンプル：**[https://jsfiddle.net/9j6r0ewd/](https://jsfiddle.net/9j6r0ewd/)
16
17---
18
19【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
20[https://saruwakakun.com/html-css/basic/chrome-dev-tool](https://saruwakakun.com/html-css/basic/chrome-dev-tool)
21
22【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
23[https://nandemo-nobiru.com/2944/](https://nandemo-nobiru.com/2944/)