テーブルレイアウトでよこ並び

中央配置と、横幅いっぱい

ナビゲーション自体に、marginプロパティで左右にautoと指定すれば中央に配置できるし、横幅100%と指定すれば親要素いっぱいに広がる。しかもリンクボタンの横幅は、その要素の内容に合わせていい具合に伸縮してくれます:D。

.nav_list {
	margin-inline: auto;
}

.nav_list {
	width: 100%;
}

リンクボタンの幅を揃える

リンクボタンの数が5つと分かっているなら、li要素の横幅を20%と指定すれば等分できます。
さらにtable要素ならでは、リンクボタンの数が変動するような場面でも、ul要素に横幅を指定しつつ、table-layoutプロパティにfixedという値を指定すれば、li要素の幅が等分割になるように調整されます。
けどやっぱりフロートの時と同じく、ボタンの高さは、文字数によってマチマチになっちゃいますね…:(。

.nav_list li {
	width: 20%;
}

.nav_list {
	width: 100%;
	table-layout: fixed;
}

td要素（=table-cellを指定したli要素）はvertical-alignプロパティで、横に並ぶ要素の縦方向の位置を制御することもできるから、下のサンプルみたくvertical-align: middleを指定すれば、リンクボタンを上下中央に揃えることができます。結局、凸凹で不格好だけど:(。

.nav_list li {
	display: table-cell;
	vertical-align: middle;
}

行数が違ってもボタンのサイズを揃える

li要素の高さは揃っているのだから、あとはa要素をli要素の高さまで引き伸ばせばよいわけです。
ということで、a要素の上下パディングを多めに指定してリンクエリアを広げたうえ、上下ネガティブマージンでパディングで広げた分を元に戻す、ということをします。
ここでは、もともと1emあった上下のpaddingプロパティの値を5emに広げ、marginプロパティでは上下に-4emを指定しています。
このままだとa要素が余計に広がったままなので、li要素にoverflow: hiddenを指定することで、li要素からはみ出した部分を非表示に（トリミング）します。

.nav_list li {
	display: table-cell;
	overflow: hidden;
	vertical-align: middle;
}
.nav_list a {
	margin-block: -4em;
	padding-block: 5em;
}

パディングによってa要素とli要素の領域が広がるけれど、ネガティブマージンではa要素の位置とli要素の領域だけが元に戻る、というトコがポイントです。
ボタンの大きさが揃いました:D！

要領よく書き直す

よこ並びにするのは768px以上の時だけなので、テーブルレイアウトするためのスタイルはみんな、メディアクエリの(min-width: 768px)の中にまとめちゃえばいいですね。さすれば、(max-width: 767px)で元通りに指定し直す必要もないです！

@media screen and (min-width: 768px) {
	.nav_list {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	.nav_list li {
		display: table-cell;
		overflow: hidden;
		vertical-align: middle;
	}
	.nav_list li:nth-child(n+2) {
		padding-left: 1px;
	}
	.nav_list a {
		margin-block: -4em;
		padding-block: 5em;
	}
}
@media screen and (max-width: 767px) {
	.nav_list li:nth-child(n+2) {
		padding-top: 1px;
	}
}