リストの左に空白ができてしまう

Question

前提・実現したいこと

リストの左にできる空白を消したい。

サイト模写をしているのですが画像1枚目の部分を作ろうとしています。リストを用いようと思ったのですが左側に空白ができうまくいきません。何か解決策を教えていただきますでしょうか。

該当のソースコード

<div class="category">
                <div class="category-title">
                  <h2><span class="fas fa-bars"></span>CATEGORY</h2>
                </div>
                <ul class="category-list">
                  <li class="cate1">



                  </li>
                  <li class="cate2">

                  </li>
                  <li class="cate3">

                  </li>
                  <li class="cate4">

                  </li>
                </ul>

              </div>

.category{
  height: 355px;
  width:312px;
  margin-top: 42px;
  margin-left: 54px;
}
.category-title{
  height: 51px;
  width:100%;
  background-color: #C8E4FF;
  display: flex;
  justify-content: left;
}
.category-title h2{
  color:#5ba9f7;
  font-size: 20px;
  line-height: 51px;
  height: 100%;
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 13px;
}
.fa-bars{
  margin-right: 6px;
}
.category-list{
  width:312px;
  height:304px;
  background-color: white;
  list-style: none;
  margin-top: 0px;
}
.cate1{
  width:100%;
  border: red solid 1px;
  height:50px;
}
.cate2{
  width:100%;
  border: red solid 1px;
  height:50px;
}
.cate3{
  border: red solid 1px;
  height:154px;
}
.cate4{
  border: red solid 1px;
  height:50px;
}

試したこと

<li>タグの部分のwidthを100%にしてみました。

Answer 1

ulのpadding-leftを0にすれば解決します。

要素にはデフォルトでCSSが適用されている場合がございます。
今回の場合は特に余白設定してないのに余白があったのは、デフォルトでCSSが適用されていたからです。
他の要素にもデフォルトで設定されているCSSがあるので、あらかじめ全要素のmarginとpaddingを0指定するとデフォルトの余白を消すことができるのでオススメです。

* {
  margin: 0;
  padding: 0;
}

Answer 2

ulにはpaddingがあるので消してみてください。

.category-list{
  width:312px;
  height:304px;
  background-color: white;
  list-style: none;
  margin-top: 0px;
  padding-left: 0px; // 追加
}

Answer 3

基本的な解決法は、他の回答にあるように、デフォルトのパディングをリセットすれば解決されます。

その他に、

<li>タグの部分のwidthを100%にしてみました。　

提示のコードでは、他の回答にもあるように「padding」を0にすると、borderの分だけ「cate1」「cate2」は、ハミ出します。

「box-sizing」や、widthの「100%」と「auto」の違いを理解すると良いかと思います。