Q&A
なんとなくですが、ご提示いただいていない部分に原因があるんじゃないかな、と感じています。
画面横ある白い空白をなくす方法を教えてください。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta name="description" content="課題①-1"> 8 <title>課題①-1</title> 9 <link rel="stylesheet" href="css/sanitize.css"> 10 <link rel="stylesheet" href="css/style.css"> 11 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 12</head> 13<body> 14 <header> 15 <div class="menu-bar"> 16 <img id="header-logo" src="img/yEVqXX.png" alt="イチヨンヨンラボ"> 17 <nav> 18 <ul id="menu"> 19 <li> 20 <a class="menu-item1" href="#">ABOUT</a> 21 </li> 22 <li> 23 <a class="menu-item2" href="#">NEWS</a> 24 </li> 25 <li> 26 <a class="menu-item3" href="#"> SERVICE&PRODUCT</a> 27 </li> 28 <li> 29 <a class="menu-item4" href="#">CONTACT</a> 30 </li> 31 </ul> 32 </nav> 33 </div> 34 <div class="test"></div> 35 </header>
CSS
1/* header */ 2 3header { 4 background-color: #F2F3F7; 5 top: -176px; 6 left: 150px; 7 width: 100%; 8 height: 970px; 9} 10 11#header-logo { 12 top: 80px; 13 left: 187px; 14 width: 168px; 15 height: 60px; 16 padding-top: 21px; 17 display: block; 18} 19 20.test { 21 position: relative; 22 top: -176px; 23 left: 150px; 24 width: 100%; 25 height: 999px; 26 background: transparent url("img/メインビジュアル.png"); 27 background-position: center; 28 z-index: 1; 29 max-width: 100%; 30} 31 32.menu-bar { 33 top: 59px; 34 width: 975px; 35 height: 77px; 36 box-shadow: 4px 4px 1px #00000029; 37 background-color: #FFFFFF; 38 display: flex; 39 justify-content: space-around; 40 z-index: 2; 41 position: absolute; 42 margin: 0 auto; 43 right: 0; 44 left: 0; 45} 46 47#menu { 48 list-style:none; 49 display:flex; 50 } 51 52#menu li{ 53 text-align: center; 54 display: flex; 55 padding-right: 40px; 56 padding-left: 40px; 57 letter-spacing: 0px; 58 position: relative; 59 } 60 61#menu a { 62 text-decoration: none; 63 color: #000000; 64} 65 66#menu li:not(:first-child)::before{ 67 content: "|"; 68 position: absolute; 69 top: 10px; 70 left: 0px; 71} 72 73 #menu .menu-item1::after { 74 display:block; 75 font-size:0.7em; 76 color: #777777; 77 text-align: center; 78 content: "企業情報"; 79 } 80 81 #menu .menu-item2::after { 82 display:block; 83 font-size:0.7em; 84 color: #777777; 85 text-align: center; 86 content: "ニュース"; 87 } 88 89 #menu .menu-item3::after { 90 display:block; 91 font-size:0.7em; 92 color: #777777; 93 text-align: center; 94 content: "サービス＆製品情報"; 95 } 96 97 #menu .menu-item4::after { 98 display:block; 99 font-size:0.7em; 100 color: #777777; 101 text-align: center; 102 content: "お問い合わせ"; 103 }
回答2件
0
ベストアンサー
場当たり的だけども、下のように変えると直るかと思います。
子要素が親要素を画面右方向へ突き抜けているだけなので。
css
1.test { 2 position: relative; 3 top: -176px; 4 left: 150px; 5 //width: 100%; 6 width: calc(100% - 150px);
投稿2021/03/12 05:19
退会済みユーザー
総合スコア0
0
「.menu-bar」の「justify-content」を
space-aroundからspace-betweenに変更してください
投稿2021/03/12 05:14
総合スコア116661
あなたの回答
tips
プレビュー
