cssでborderを指定しているのにクロームで右側だけ表示されないです。

Question

前提・実現したいこと

htmlでホームページを作っています。
snsのボタンを三つdisplay:flexで横並びにしています。
テキストの横にアイコン画像を置いて、枠で囲ったボタンを表示させたいです。
よろしくお願いいたします

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

テキストとアイコンをdivとaタグでくくってcssでborderをしています。
サファリではちゃんと見えているのですが、クロームで見ると、borderの右側が消えて見えなくなっています。

該当のソースコード

html
<div class="sns-container">
	<div class="sns">
		<a href="" target="_blank">
		　instagram<span><img src="img/insta.png" alt="instagram"></span>
		</a>
	</div>
	<div class="sns">
		<a href="" target="_blank">
		　ameba blog<span><img src="img/ameba.png" alt="ameba blog"></span>
		</a>
	</div>
	<div class="sns">
		<a href="" target="_blank">
		　twitter<span><img src="img/twitter.png" alt="twitter"></span>
		</a>
	</div>
</div><!--sns-container-->

css
.sns-container{
	display: flex;
	justify-content: center;
	align-items: center;
}
.sns a{
	color: white;
	border: solid 3px white;
	border-width: 3px;
	padding: 20px 25px;
	margin: 0 10px;
	font-family: 'Slabo 13px', serif;
	font-weight: bold;
	letter-spacing: 1px;
	transition: .3s;
}
.sns a:hover{
	transition: .3s;
	background: rgba(143,82,84,0.6);
}
.sns img{
	vertical-align: middle;
}

.sns a span{
	display: inline-block;
	padding-left: 8px;
	padding-right: 3px;
}
 

試したこと

border-width指定してみましたが変わりませんでした。
画像で隠れてしまったのかと思いz-indexでimgだけ下にしてみましたが、borderは現れませんでした。spanごと画像を無くしてテキストだけにすると右のborderが現れます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

html、CSSはコードブロックをわけて、それぞれ冒頭```を```html,```cssのようにしてください。回答者が再現確認とりづらくなっています。

Answer 1

.sns a {
  display: block;
}

a はインライン要素なので、ブロックレベル要素にすればいいかなーと思います。

Comments

[moms]

直りました！とっても助かりました、Takamosoさんありがとうございました！！