フロートでよこ並び

ナビゲーションを中央に配置する

上のサンプルだと、ナビゲーション全体が左に寄っちゃってますけれど、中央に配置したいなって時には、ul要素の横幅にfit-contentという値を指定して、左右のマージンにautoを適用すれば、うまく中央に配置されます。
fit-contentは、指定した要素内のコンテンツに準拠したサイズを表すキーワードで、ここでは、li要素5つ分の横幅が、ul要素に適用されます。そして幅を持つプロック要素は、左右のマージンにautoが適用されると、うまい具合に中央に寄るのです。:)

.nav_list {
	width: fit-content;
	margin-inline: auto;
}

ナビゲーションを横幅いっぱいにレイアウトする

ナビゲーション全体を親要素の横幅いっぱいに広げるには、widthプロパティの値の合計が100%となるように、li要素の横幅に20%を指定します。

.nav_list li {
	float: left;
	width: 20%;
}

あれれ、なんだか変になっちゃいました。最後のリンクボタンが改行しちゃってるみたいですね…:(。
width/heightプロパティで指定したサイズは、paddingプロパティの内側のサイズとして適用されて、paddingプロパティの値は指定したサイズの外に適用されるんです。
つまり今、リンクボタンの横幅は、20% + 1pxになってるってこと。100%を超えて、最後のひとつだけ改行しちゃいました。Xp

この振る舞いは、box-sizingプロパティで変更できます。
デフォルトではcontent-boxという値になっていて、width/heightプロパティで指定したサイズは、padding/borderプロパティの値を含まないサイズとして適用されるのだけれど、これをborder-boxという値に変えると、padding/borderプロパティの値を含むサイズとして適用されるようになります。
レイアウトする時にはこちらの振る舞いの方がわかりやすくて良いですね:)！

.nav_list li {
	float: left;
	width: 20%;
	box-sizing: border-box;
}

均等に横に並んだけれど、文字数によって改行されると、リンクボタンの高さが揃わなくてかっこ悪いです…。
下のサンプルでは、リンクボタンのテキストがなるべく1行になるように、文字数に合わせてボタンの横幅を調整してみたけれど、画面幅によっては結局、改行したりしなかったりするし…X(。

.nav_list li {
	float: left;
	width: 17%;
	box-sizing: border-box;
}
.nav_list li:nth-child(2) {
	width: 36%;
}
.nav_list li:nth-child(3),
.nav_list li:nth-child(5) {
	width: 15%;
}

文字数をうかがいながら細かい調整するのは、面倒臭いから、ちょっと厭（や）かも…。
そんな時にはテーブルレイアウトを使う方法が便利です！…けれどそれはまた次の記事で。

レスポンシブにする

レスポンシブ（Responsive）は“反応する”という意味。レスポンシブWebデザインというと、Webサイトを閲覧している環境や、表示領域（ビューポート）サイズに応じて、適したデザインで閲覧できるように調整されたWebデザインのことを言います。
このサンプルみたいなレイアウトの商品一覧の場合には、横幅に合わせて並べる列数を切り替えて調整することが多いです。

レスポンシブに表示を切り替えるにはメディアクエリを利用します。@mediaルールという構文を使って、スタイルが適用される時のビューポート幅を制限することで、ビューポート幅に合わせて、スタイルを切り替えることができるようになります。
ここでは、767px以下の時は2列、428px以下の時には1列になるようにします^※。

767px以下とはつまりiPad未満（iPadを含まない、それよりも小さいビューポート幅）ということ。428pxはちょうどiPhone 14 Pro Maxを縦に持った時のビューポート幅になります。

@media (max-width: 767px) {
	.menu_list li {
		width: 50%;
	}
}
@media (max-width: 428px) {
	.menu_list li {
		width: 100%;
	}
}

2列の時にまたグチャッちゃいました…。2列ずつになって改行位置が変わったので、clearする要素を変えねばなりません。今度は、“2つめの次”にclearプロパティを適用します。“3つめの次”に指定してたclearプロパティは、noneに指定し直しておきます。
1列の時には、“2つめの次”のclearプロパティもnoneと指定しておきましょう。
フロートで商品一覧は一丁あがり！

@media screen and (max-width: 767px) {
	.menu_list li {
		width: 50%;
	}
	.menu_list li:nth-child(3n+1) {
		clear: none;
	}
	.menu_list li:nth-child(2n+1) {
		clear: left;
	}
}
@media screen and (max-width: 428px) {
	.menu_list li {
		float: none;
		width: 100%;
	}
	.menu_list li:nth-child(2n+1) {
		clear: none;
	}
}

メディアクエリについて、詳しくは下記ページを参照のこと。
メディアクエリの利用 - CSS: カスケーディングスタイルシート | MDN