ボタンのaタグのボタンとして認識される部分の変更

Question

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

このインスタグラムのリンクのボタンのボタンとして認識される部分を、マークの部分だけにしたいです。中のautoとなっている部分の大きさを変更する方法がわからないので教えていただきたいです。
また、他のマークは、float:leftにしていてボタンとして認識されるのはそれぞれのマークの部分だけなのですが、このような配置をしたい場合、floatを使うのが良い選択なのかも教えていただきたいです。

該当のソースコード

```CSSではmarginとpaddingの設定しかしてないです。

### 試したこと
marginとpaddingの変更

Comments

[yoshinavi]

症状が再現するコードを画像ではなく、ヘルプ等を参考にして「コードブロック」として提示してください。

Answer 1

該当するhtmlとcssファイルを添付していただけると修正や回答がしやすいです。

画像を見た限りだと

section a:last-child {
max-width:（任意の値）%;
}

でできそうな気もします。
クラスやID名を指定するかsection内の『最後の』aタグのwidthを指定すれば「マークの部分だけ指定」できると思います。

Comments

[ogulife]

不明確な質問にも関わらずお返事くださりありがとうございます。
このアイコン(Font Awesomeより)に関するコードです。
wataameさんのご指摘を受け、aタグにmax-widthや、widthを設定してみたりしたのですが、ボタンとして認識される部分の大きさを変えることができませんでした。
もし原因がわかりましたら、教えていただけないでしょうか？
貴重なお時間を使ってしまって申し訳ございません。
よろしくお願いします。
【HTML】
<a href="#" class="insta"><i class="fab fa-instagram"></i></a>
【CSS】
　.fa-instagram {
　 margin-right: 200px;
　padding-right: 0;
　}

　.insta {
　max-width: 18px;
　}

[wataame]

上記の内容をこちらで再現した画像を添付します。
確認した限りではFont Awesomeのインスタグラムアイコンの中にaリンク要素は収まっています。

質問
・そもそもの希望としてはアイコン内にaリンク要素を納めたいの否か
・section.giftcardクラス以下のhtmlとcssをコードブロックで記述することは可能でしょうか。

他の方も指摘しているように問題の箇所のコードがないと回答が難しいです。
もしご希望している内容がアイコン内にaリンク要素を納めたいのであれば現在いただいているcssで再現できています。
恐らく他のhtml、css側に問題があると思われます。

よろしくお願いします。

[wataame]

◾️このような配置をしたい場合、floatを使うのが良い選択なのかも教えていただきたいです。

>>今だとdisplay: flex;が主流だと思います。
（ほぼ全てのブラウザに対応していますし、レスポンシブでもかなり融通がききます。参考までに。）

[ogulife]

wataameさんのご指摘に沿って、flexboxを勉強しましたら、解決しました。ありがとうございました。