li要素をaタグではさむと、flex-boxが全体的に少し左にずれてしまいます。

4つの円を横並びにして中にテキスト、flex-boxで均等間隔で中央に横並び。
というレイアウトです。3つの円にリンクさせます。

テキストだけではなく円全体でリンクさせたいので、li要素をaタグではさむのですが、そうすると全体が少し左にずれてしまいます。一見、大体は中央揃えになりますが、微妙に左にずれています。左に行くほどズレが大きく、右に行くほどズレが小さいです。

※no_linkクラスの部分は、本来はリンクさせないのでaタグで挟む必要はありませんが、挟まないとレイアウトが大幅におかしくなるので便宜上こうしています。それでもなお、左に少しずれる、という状況です。

解決策ご存知でしたらご教授下さい。よろしくお願いいたします。

html
1<div id="id" class="class">
2<ul><a href="#"><li class="link">1</li></a>
3<a><li class="no_link">2</li></a>
4<a href="#"><li class="link">3</li></a>
5<a href="#"><li class="link">4</li></a>
6</ul>
7</div>

css
1#id ul {
2margin:0 auto;
3max-width:850px;
4width:100%;
5display: flex;
6justify-content: space-around;
7}
8
9#id ul li {
10display: inline-block;
11width: 120px;
12height: 120px;
13margin: 0 auto;
14text-align: center;
15line-height: 120px;
16}