前提・実現したいこと
ヘッダーを横いっぱいに広げたい
発生している問題
ヘッダーが少し右による
該当のソースコード
html
1<html><head><meta name="viewport" content="width=device-width,initial-scale=1" /> 2</head><body><header> 3 <div class="header-logo-menu"> 4 <div id="nav-drawer"> 5 <input id="nav-input" type="checkbox" class="nav-unshown" /> 6 <label id="nav-open" for="nav-input"><span></span></label> 7 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 8 <div id="nav-content">ここに中身を入れる</div> 9 </div> 10 <div class="logo-area"><h2>logo</h2></div> 11 </div> 12</header> 13 14<style> 15header { 16 padding:10px; 17 margin-left:0px; 18 background: #fff; 19border:medium solid #94de8c; 20width:100%; 21} 22 23#nav-drawer { 24 position: relative; 25} 26 27/*チェックボックス等は非表示に*/ 28.nav-unshown { 29 display:none; 30} 31 32/*アイコンのスペース*/ 33#nav-open { 34 display: inline-block; 35 width: 30px; 36 // height: 22px; 37height: 8vh; 38 vertical-align: middle; 39} 40 41/*ハンバーガーの形をCSSで表現*/ 42#nav-open span, #nav-open span:before, #nav-open span:after { 43 position: absolute; 44 45 height: 1px; 46 width: 45px;/*長さ*/ 47 border-radius: 10%; 48 background: green; 49 display: block; 50 content: ''; 51 cursor: pointer; 52} 53#nav-open span:before { 54 bottom: -8px; 55} 56#nav-open span:after { 57 bottom: -16px; 58} 59 60/*閉じる用の薄黒箇所*/ 61#nav-close { 62 display: none; 63 position: fixed; 64 z-index: 99; 65 top: 0; 66 left: 0; 67 width: 100%; 68 height: 100%; 69 background: black; 70 opacity: 0; 71 transition: .3s ease-in-out; 72} 73 74/*メニューの中身*/ 75#nav-content { 76 overflow: auto; 77 position: fixed; 78 top: 0; 79 left: 0; 80 z-index: 9999; 81 width: 80%; 82 max-width: 90%;/*最大幅(お好みで調整を)*/ 83 height: 100%; 84 background: #fff; 85 transition: .3s ease-in-out; 86 -webkit-transform: translateX(-105%); 87 transform: translateX(-105%); 88} 89 90/*チェックがついたら表示させる*/ 91#nav-input:checked ~ #nav-close { 92 display: block; 93 opacity: .5; 94} 95 96#nav-input:checked ~ #nav-content { 97 -webkit-transform: translateX(0%); 98 transform: translateX(0%); 99 box-shadow: 6px 0 25px rgba(0,0,0,.15); 100} 101 102.header-logo-menu{ 103 display: flex; 104 display: -moz-flex; 105 display: -o-flex; 106 display: -webkit-flex; 107 display: -ms-flex; 108 flex-direction: row; 109 -moz-flex-direction: row; 110 -o-flex-direction: row; 111 -webkit-flex-direction: row; 112 -ms-flex-direction: row; 113} 114 115 116.logo-area{text-align:center;margin:auto;} 117</style></body></html> 118
試したこと
margin:0px;をつけてみたりしました。
(質問文は編集できます)質問タイトルが「with:100vw」になっています。「width」です。
直しました。ありがとうございます
回答2件
あなたの回答
tips
プレビュー