Inputで作成したボタン風チェックボックスを可変幅から固定幅に改変したいです

Question

前提・実現したいこと

超初心者です。
HTML5&CSSでボタン風チェックボックスを作成しています。
ボタン風チェックボックスの幅を可変幅でなく、固定幅（スマホで見やすい程度の幅）にしたかったのですが
対応方法がわからず、質問しました。
検索などは既に行った後です。
Input以外のものを利用する方法も調べましたが、可能な限りInoutなどはそのままで、デザイン変更で対応したいです。

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

固定幅のボタン風チェックボックスを作成したいのですが、可変幅になっていて困っています。

該当のソースコード

 <label class="check_lb"><span style="background-color: rgb(170, 170, 170);">いぬ</span></label>
    <!--
-->
    <label class="check_lb"><input type="checkbox" value="さる" name="animal"><span>さる</span></label>
    <!--
--><label class="check_lb"><input type="checkbox" value="きじ" name="animal"><span>きじ</span></label>
    <label class="check_lb"><input type="checkbox" value="きじ" name="animal"><span>桃太郎</span></label>

 label {
  margin-right: 5px;
  /* ボタン同士の間隔 */
}

 label input {
  display: none;
  /* デフォルトのinputは非表示にする */

}

 label span {
  color: #333;
  /* 文字色を黒に */
  font-size: 35px;
  /* 文字サイズを14pxに */
  border: 1px solid #333;
  /* 淵の線を指定 */
  border-radius: 8px;
  /* 角丸を入れて、左右が丸いボタンにする */
  padding: 5px 20px;
  /* 上下左右に余白をトル */
  cursor: pointer;
  width: 100%;
  backface-visibility: 100%;
  background-size: contain;

  color: #fff;
  background: #7ca86c;
  border: 1px solid #fff;
  border-bottom: 5px solid #666;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);

}

 label input:checked+span {
  color: #FFF;
  /* 文字色を白に */
  background: #aaa;
  /* 背景色を薄い赤に */
  border: 1px solid #aaa;
  /* 淵の線を薄い赤に */

}

 .check_lb {
  display: block;
}

試したこと

HTML側でWidthを指定してみる
labelでなく、buttonに変更しようとしてみる
listにしてみる

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

ブログ記事の一部に利用します。

Answer 1

完成形がわからないので適当に

.check_lb span{
display:inline-block;
width:3em;
}

Comments

[EVA_pika]

ありがとうございます！書いてくださったCSSの幅の方を変えたら問題が解決しました。
今後は完成形のイメージなどもきちんと記載します！