前提
HMTL・CSSで自社HPを制作しています。
ヘッダーがレイアウト崩れをしてしまい困っています。
実現したいこと
①ヘッダー上部に画像（ちょっとした装飾）
②ヘッダー中央にロゴ
③ヘッダー右に予約ボタン
④ヘッダー下部にナビメニュー
※②③は同じ列にしたいです。
発生している問題・エラーメッセージ
②と③を同列にするため「display: flex;」を利用しましたが、
②が左よりになってしまい、型崩れをしてしまいます。
該当のソースコード
HTML
<body> <header id="header" class="fadeDownTrigger"> <div class="header-image"><!--/①部分--> <img src="images/header.png" alt=""> </div> <div class="header1"> <div class="logo"><!--/②部分--> <h1><a href="index.html"><img class="logo" src="images/logo.png" alt="green naturl" ></a></h1> </div> <div class="h_menu_box"><!--/③部分--> <ul class="main-nav"> <li> <a href="https://" target="_blank" rel="nofollow noopener" class="reservation" >予約する</a> </li> </ul> </div></div> </body>
CSS
@charset "UTF-8"; /* 共通部分 ------------------------------- */html { font-size: 100%;}body{ font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif; line-height: ; color: rgb(0, 0, 0); margin:0; background-color: #ECF3E3;/*背景を薄緑に*/}a { text-decoration: none;}h2 { color: #287646; text-align: center;}img { max-width: 100%;} /* HEADER ------------------------------- */.header-image { width:100%; margin:-5% 0 0 0; position:absolute;}.header 1{ display: flex;}.logo { text-align: center; padding:3% 20%;}.logo img { width:90vw; height:auto;} /*h_menu_box*/.main-nav { font-size: 3vw; list-style: none;}.main-nav li { margin: ;}.h_menu_box { margin-left:auto; width: ; float: ; margin: 0 3%; justify-items: end;}.h_menu_box a { color: #fff; font-size: 100%; border-radius: 2vw; background: #e9d1fd; border: 1px solid transparent; box-sizing: border-box;}.h_menu_box a.reservation { padding: 11px 0.85em; background: #F4CEF4; letter-spacing: 0.14em; font-size: 100%;}.h_menu_box a.reservation:hover { color: #808080; background: rgba(255,255,255,0.6); border-color: #808080;}
試したこと
補足情報（FW/ツールのバージョンなど）
初めてのHP制作につき、初歩的な質問で大変恐縮ですが
教えてくださると嬉しいです。
よろしくお願いいたします。
0 コメント