CSSの課題の一つ「横並びナビゲーションをどう実装するか問題」に対する自分なりの解答例です。
「問題」と言いましたが、古くは float や inline-block、近年では Flexbox や Grid Layout など、既に定説なり模範解答なりが存在しますので、実際の実装例はそちらに譲りたいと思います。
ここでは、（実際に実装するかどうかは別にして）技術的な探求を目的として "CSS のプロパティだけでどこまで横並びに出来るか"を検証しました。
HTML の構造体を共通化（ nav > ul > li > a ）しており、異なる class を充てることで、違ったスタイルを適応している点が特徴です。