【WordPress】画像にリンクをつけると小さくなり下線が出てしまいます

Question

実現したいこと

画像にリンクをつけても、下線が出ないように、リンクをつける前の画像のサイズのまま変わらないでほしいです。

発生している問題・分からないこと

画像にリンクをつけると小さくなり、下線が出てしまいます。
調べたりしたのですが解決できなかったので
何かわかる方、方法を教えていただきたいです。
よろしくお願いいたします。

該当のソースコード

 <div class="sign_flexbox-container">
            <aside>
                    テキスト
            </aside>
            <main><a href="#"><img src="ロゴ.png"></a>
            </main>
            <aside>
              <div class="icon_container">
              <a href="#"><img src="メール.png" alt="メール"></a>
              <a href=”#”><img src="お電話.png" alt="お電話"></a>
              <a href="#"><img src="LINE.png"" alt="LINE"></a>
              </div>
            </aside>
        </div>

.sign_flexbox-container {
    display: flex;
}

.sign_flexbox-container main {
    width: 700px;
    margin: auto;
    height: 300px;
		text-align: center;
		padding: 0 50px;
}

.sign_flexbox-container main img {
    width: auto;

}

.sign_flexbox-container aside {
    width: 250px;
    min-width: 250px;
    margin: auto;
    height: 300px;
	font-size: 0.9rem;
}

.icon_container {
    display: flex;
    justify-content: space-around; /* 画像の間に均等に余白を設定 */
}

.icon_container img {
    width: 30%; /* 画像が3つ並ぶように設定 */
    height: auto;
}

@media only screen and (max-width: 767px) {
	.sign_flexbox-container {
   flex-direction: column;
}
	.sign_flexbox-container main {
		width: 100%;
	height: auto;
		margin: auto;
			padding-bottom: 20px;
	}
	.sign_flexbox-container aside {
		order: 1;
		width: 100%;
	height: auto;
	margin: auto;
	padding-bottom: 20px;
	}
	.sign_flexbox-container aside img {
	width: 120px;
}
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

.icon_container a {
text-decoration: none;
}
など入れてみましたが下線も消えず、画像のサイズも小さくなったままでわかりませんでした。

補足

特になし

Answer 1

widthはflexboxの直下に設定する必要があります。

.icon_container a {
    display: block;
    width: 30%;
}

.icon_container img {
    max-width: 100%;
}

Comments

[kama_111]

ご回答ありがとうございます！
試したところ画像のサイズが戻りました！
勉強になりましたm(_ _)m
ありがとうございました！

Answer 2

こうするとどうなりますか？

.icon_container img {
    /*width: 30%; 削除 */
    height: auto;
}

.icon_container a {
    border: none; /* 追加 */
}

Comments

[kama_111]

ご回答ありがとうございます！！
試してみました！
画像が左が小さく、真ん中ちょうどいいくらい、右が大きくなりました
下線は出たままです（ ; ; ）