質問: ### 前提・実現したいこと HTML&CSSを使って模写コーディングをしています。 ※モデルとなるWebページ➡(https://haniwaman.com/sample/part3/template_08/) ### 発生している問題・エラーメッセージ ``` 横に5つ並んでいるメニューの「トップページ」 ~「アクセス」のレイアウトを調整したいのですが、以下の2点の問題がどうしても出てしまいます。 1.padding, margin共に0に指定しても横の隙間が埋まらない。 2.5つのメニューが横並びにならず、1つだけ改行された形になる。 ``` ### 該当のソースコード ``` トップページHOME 医院紹介CLINIC 診療案内SERVICE 院長・スタッフ紹介STAFF アクセスACCESS ``` ``` .top-wrapper ul { list-style-type: none; height: 74px; width: 1040px; } .top-wrapper li { display: inline-block; width: 208px; margin-right: 0; border: 1px solid #6CC6C4; text-align: center; padding-top: 12px; padding-bottom: 12px; } .top-wrapper { margin-left: auto; margin-right: auto; width: 1040px; } ``` ### 試したこと 1について、検証ツールを用いてmargin,paddingを調べましたが、ちゃんと0になっているにも関わらず謎の隙間が依然として出ていました。 2について、top-wrapperの横幅の長さを指定することで、各メニューのwidthを20%にしたときに均等に並ぶと考えましたが、できませんでした。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: `.top-wrapper li`に対して`box-sizing: border-box`を追加してみては如何でしょうか