自分用で投稿しますが、参考になれば幸いです。
1.floatを使用して二つの要素を左右に並べたときに下の要素が上に押し寄せてきた。
→floatさせた要素に対して高さを持たせる。
2.aタグの下線を消したい。
→aタグのcssにtext-decoration: none; を入力する。
3.liタグをdisplay: flex;で横並びにした時に、先頭のli要素の左側に謎の隙間が存在していた。
→ul要素にpadding-left: 0; を指定する。
4.liタグをdisplay: flex;で横並びにした時に、中の文字数によって枠の大きさが変わってしまう。
→下記3点を満たすとき、自動で均等幅になる。
・display: flex;の要素が改行不可
・子要素の幅がすべて統一指定
・子要素の幅合計が親要素の幅を超える(width: 100%;を指定する)
5.liタグの中にあるaタグの縦位置を中央に揃えたい。
→aタグにmarginを設定する