CSSで背景画像を挿入しましたが両端に空白でできてしまいます。
※おそらくmargineやpaddingの設定、もしくはbodyやdiv要素の位置だとおもうのですが、解決方法がわかりません。
今やっていること:
このサイトを模写しています。
link:https://isara.life/
解決したいこと:
サイトの背景画像の両端に出る空白を消したい。
やってみたこと:
下記質問に乗っていることをしましたが、なおりませんでした。
サイトの右にできる余白の解決方法がわかりません。
このようになってしまいます。↓(この下に実際のコードを貼っています)
コード:
html:
<html lang="ja"> <head> <meta charset="utf-8"> <title>iSara</title> <link rel="stylesheet" href="iSara.css"> </head> <body> <header> <div class="title"> <div class="logo"> <img class="titile_logo" src="images\isaralogo.png" alt=""> </div> <div class="title_text"> <p>バンコクのノマドエンジニア育成講座</p> </div> <div class="contact_info"> <p> お問い合わせ/資料請求はこちら</p> </div> </div> </header> <!-- MAIN --> <div class="background_main"> </div> </body>
css:
header
1 2} 3 4div{ 5 font-size: 100%; 6} 7 8/* 上部ヘッダー大枠: */ 9div.title { 10 position: relative; 11 height: 60px; 12 width: 100%; 13 max-width: 1200px; 14 margin: auto; 15} 16 17.logo img { 18 height: 46.55px; 19 width: 128px; 20 float: left; 21 vertical-align: middle; 22} 23 24/* バンコクのノマドエンジニア育成講座(タイトル): */ 25.titile_text { 26 height: 200px; 27 width: auto; 28 float: left; 29 display: block; 30} 31 32.title_text p { 33 margin-bottom: 0; 34 font-size: 14px; 35 font-weight: 600; 36 position: relative; 37 bottom: -22px; 38 39} 40 41/* お問い合わせ/資料請求ボタン: */ 42.contact_info { 43 cursor: pointer; 44 position: absolute; 45 right: 0px; 46 top: 4px; 47 color: #fff; 48 padding: 0px 20px; 49 background-color: #da6b64; 50 border-radius: 30px; 51 max-width: 20%; 52 max-height: 50px; 53} 54 55.contact_info p { 56 font-size: 70%; 57} 58 59/* メインページ: */ 60.background_main { 61 height: 1000px; 62 background-image: url(images/main.jpg); 63 background-repeat: no-repeat; 64 background-size: 1400px; 65 margin: 0; 66 padding: 0; 67} 68 69コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。