質問: 質問失礼致します。 現在、模写コーディングをやっている最中なのですが、Flexboxは問題なく反映されているのですが各リストの間隔と位置の修正ができなくて困っています。 やりたい事 1各liの間隔を近くする(ナビゲーションバーのように) 2ulをclass="addressの位置と均等になる様に左側に置く ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/2908d0836ae200d0be9ed8c43a29d31a.png) ``` XX株式会社 〒000-0000 東京都新宿区新宿1-2-3 TEL 00-0000-0000 FAX 00-0000-0000 トップページ 会社概要 事業内容 採用情報 お問い合わせ ``` ``` .footer contact-wrapper { width: 1200px; display: flex; justify-content: space-between; align-items: center; padding: 50px 0; } .address h2 { width: 30%; margin-top: 80px; margin-left: 45px; } .address p { line-height: 1.8; width: 30%; margin-top: 60px; margin-left: 45px; } .footer ul { height: 100px; display: flex; justify-content: space-between; margin-left: auto; align-items: center; font-size: 1rem; } .footer ul li { margin-right: 50px; margin-left: auto; } ``` HTML/CSS独学を始めたばかりで、調べても調べても模範の様にならなく途方に暮れています。
回答: こんにちは。 >*Flexboxは問題なく反映されている* 反映されていないと思います。 `.footer contact-wrapper {`→`.footer .content-wrapper {` >*1各liの間隔を近くする(ナビゲーションバーのように)* マージンで余白を取っていることが原因では。 ``` .footer ul li { margin-right: 50px; /* ←これを調節する */ margin-left: auto; } ``` >*2ulをclass="addressの位置と均等になる様に左側に置く* 均等、というのがよくわからないですが、.address と ul の幅を同じに、ということであれば、`width:50%`や`flex-basis:50%`などとした方が手っ取り早いと思います。 また、ulを左側に置くのであれば、HTMLの順序を変えて ul を .address の前に書くのが筋だとは思いますが、HTMLを変更できない事情があるのでしたら、`flex-direction: row-reverse`がいいと思います。 ``` .footer .content-wrapper { flex-direction: row-reverse; } .address,ul{ flex-basis: 50%; } ```