アイコンの幅を狭くして、配置を変えたい

Question

前提・実現したいこと

現在、フロントエンドの勉強で、
こちらのページを模写しています。
そこで、
ページ下部のリンク部分（⬇️画像参照）で苦戦をしており、質問させていただきたいことがあります。

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

緑の「新着」アイコンの実装をしているのですが、
上の画像のようにリンクの隣には配置されず、
リンクの下に配置されてしまっています。

widthを指定しても、以下のように、オレンジ色の部分が右に広がってしまってしまいます。
ただ、デベロッパーツールを見てもわかるように、オレンジ色を示すmarginは特に指定しておりません。

どのように解決すれば良いでしょうか・・・？

該当のソースコード

<div class="col-xs-3 col-lg-3">
              <h4 class="btn-title">スタッフのおすすめ</h4>
              <a href="#" class="link-bottom">信頼&安全</a><br />
              <a href="#" class="link-bottom">お友達紹介クーポン</a><br />
              <a href="#" class="link-bottom">Airbnb Citizen</a><br />
              <a href="#" class="link-bottom">出張</a><br />
              <a href="#" class="link-bottom">ガイドブック</a><br />
              <a href="#" class="link-bottom">Airbnbmag</a><br />
              <a href="#" class="link-bottom">イベント</a><span class="icon-new">新着</span>
            </div>

.icon-new {
  background-color: rgb(0, 106, 112);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20%;
}

Comments

[stdio]

classにbtn-xsとか追加して詰めるではだめなの？

[yoshinavi]

「bootstrap」を使用しているのであれば、タグも追加してください。
「flex」の使用要素等も再確認されると良いかと思います。

Answer 1

その部分、displayはflexじゃなくてinline-blockじゃないですか。
例えば

.icon-new {
  background-color: rgb(0, 106, 112);
  color: #fff;
  display: inline-box;
  padding: 2px 4px;
  border-radius: 4px;
}

のように。paddingなどの数値はお好みで調整してください。

Comments

[退会済みユーザー]

-推敲の結果必要がないことがわかったので削除しました-

[mai0521]

inline-blockで対処することで解決できました！
displayについて知識が曖昧だったので、いただいた回答から改めて勉強させていただきました。
ありがとうございますm(_ _)m！！