###前提・実現したいこと
現在、以下のように記述していますが、ブラウザーで表示して、
横にスクロールすると右側に余白が残ります。
その消し方を教えていただきたいです。
よろしくお願いいたします。
###該当のソースコード
HTML
ここにご自身が実行したソースコードを書いてください
<section> <header class="header"> <div class="header-menu"> <div class="page-title"> <a href="correct-observe.html"><img src="image/logo.png"></a> <h1><a href="correct-observe.html">CORRECT OBSERVE</a></h1> </div> <ul class="dropmenu" id="left-to-right"> <li><a href="#news">NEWS</a> </li> <li><a href="#division">DIVISION</a> <ul> <li><a href="#">WEB MEDIA</a></li> <li><a href="#">PRODUCTION</a></li> <li><a href="#">PUBLISHING</a></li> <li><a href="#">FUNDING</a></li> </ul> </li> <li><a href="#about">ABOUT US</a> <ul> <li><a href="#">COMPANY</a></li> <li><a href="#">HISTORY</a></li> <li><a href="#">PROFILE</a></li> <li><a href="#">PRIVACY POLICY</a></li> </ul> </li> <li><a href="#">CONTACT</a> <ul> <li><a href="#">MAIL</a></li> <li><a href="#">PHONE</a></li> </ul> </li> </ul> </div> </header> <div class="main-image"> <h1>Observe & Create the Benefits</h1> </div> </section> <article class="main-part"> <div class="news" id="news"> </div> <div class="contents"> <div class="contents-division"> <h1 id="division">DIVISION</h1> <ul> <li> <div class="division-images"> <img src="image/webmedia.png"/> <a href="#"><div class="mask"> <div class="caption">WEB MEDIA</div> </div></a> </div> </li> <li> <div class="division-images"> <img src="image/production.png" /> <a href="#"><div class="mask"> <div class="caption">PRODUCTION</div> </div></a> </div> </li> </ul> <ul> <li> <div class="division-images"> <img src="image/publishing.png"/> <a href="#"><div class="mask"> <div class="caption">PUBLISHING</div> </div></a> </div> </li> <li> <div class="division-images"> <img src="image/funding.png" /> <a href="#"><div class="mask"> <div class="caption">FUNDING</div> </div></a> </div> </li> </ul> </div> <div class="contents-about"> <h1 id="about">ABOUT US</h1> <ul> <li> <div class="about-images"> <img src="image/office.png"> <a href="#"><div class="mask"> <div class="caption">COMPANY</div> </div></a> </div> </li> <li> <div class="about-images"> <img src="image/history.png" /> <a href="#"><div class="mask"> <div class="caption">HISTORY</div> </div></a> </div> </li> <li> <div class="about-images"> <img src="image/profile.png"/> <a href="#"><div class="mask"> <div class="caption">PLOFILE</div> </div></a> </div> </li> <li> <div class="about-images"> <img src="image/privacy.png"/> <a href="#"><div class="mask"> <div class="caption">PRIVACY POLICY</div> </div></a> </div> </li> </ul> </div> </div> </article>
CSS
1@charset "UTF-8"; 2 3body{ 4 font-family:"futura", sans-serif; 5 text-decoration: none; 6} 7 8a{ 9 text-decoration: none; 10} 11 12a:link{ 13 color:#ffffff; 14} 15 16li { 17 list-style: none; 18} 19 20.header a:visited{ 21 color:#ffffff; 22} 23 24.main-part a:visited{ 25 color:#ffffff; 26} 27 28.footer a:visited{ 29 color:#ffffff; 30} 31 32section { 33 background-image: url("image/main-image.png"); 34 background-size:cover; 35 height:700px; 36} 37 38.header{ 39 background-color: #16244b; 40} 41 42.header-menu{ 43 padding-top:5px; 44} 45 46.page-title img{ 47 padding-top:4px; 48 padding-left:60px; 49 padding-right:10px; 50 width:40px; 51 height:40px; 52 float:left; 53} 54 55.page-title h1{ 56 font-size:36px; 57 font-weight:normal; 58 color:#ffffff; 59} 60 61.dropmenu{ 62 *zoom: 1; 63 list-style-type: none; 64 width:100%; 65 margin:0 auto; 66 padding-left:10%; 67 padding-right:10%; 68 69} 70 71.dropmenu:before, .dropmenu:after{ 72 content: ""; 73 display: table; 74} 75 76.dropmenu:after{ 77 clear: both; 78} 79.dropmenu li{ 80 position: relative; 81 float: left; 82 margin: 0; 83 text-align: center; 84 width:20%; 85 display: inline-block; 86} 87 88.dropmenu li a{ 89 display: block; 90 margin: 0; 91 padding: 15px 0 ; 92 background: #16244b; 93 color: #ffffff; 94 font-size: 24px; 95 line-height: 1; 96 text-decoration: none; 97} 98 99.dropmenu li ul{ 100 list-style: none; 101 position: absolute; 102 z-index: 9999; 103 top: 100%; 104 left: 0; 105 margin: 0; 106 padding: 0; 107} 108 109.dropmenu li ul li{ 110 padding: 0; 111 width:100% 112} 113 114.dropmenu li ul li a{ 115 padding-top: 13px; 116 padding-bottom:13px; 117 padding-left:13px; 118 border-top: 1px solid #a91f27; 119 background: #16244b; 120 text-align: left; 121 font-size: 18px; 122 display: block; 123} 124.dropmenu li:hover > a{ 125 background: #a91f27; 126} 127 128.dropmenu li:active > a{ 129 background: #a91f27; 130} 131 132.dropmenu li a:hover{ 133 background: #a91f27; 134} 135 136.dropmenu li a:active{ 137 background: #a91f27; 138} 139 140#left-to-right ul{ 141 overflow: hidden; 142 width: 0; 143 transition: .5s; 144} 145 146#left-to-right li:hover ul{ 147 width: 100%; 148} 149 150#left-to-right li:active ul{ 151 width: 100%; 152} 153 154#left-to-right li:hover ul li a{ 155 white-space: nowrap; 156} 157 158#left-to-right li:active ul li a{ 159 white-space: nowrap; 160} 161 162.main-image h1{ 163 color:#ffffff; 164 text-align:center; 165 padding-top:140px; 166 font-size:78px; 167} 168 169.contents h1{ 170 color: #16244b; 171 font-size: 50px; 172 text-align: center; 173} 174.contents-division ul{ 175 margin-left: 5%; 176 margin-right:5%; 177 178} 179 180.contents-division li{ 181 display: table-cell; 182} 183 184.division-images { 185 width: 600px; 186 height: 300px; 187 overflow: hidden; 188 position: relative; 189 margin-bottom:45px; 190 padding: 0; 191 192} 193 194.division-images img{ 195 width: 50%; 196 height: 100%; 197} 198 199.division-images .caption { 200 font-size: 36px; 201 color: #ffffff; 202 text-align: center; 203 padding-top: 40%; 204 padding-bottom: 40%; 205} 206 207.division-images .mask { 208 width: 50%; 209 height: 100%; 210 position: absolute; 211 top: 0; 212 left: 0; 213 margin-left: -50%; 214 background-color: #16244b; 215 -webkit-transition: all 1s ease; 216 transition: all 1s ease; 217} 218.division-images:hover .mask { 219 margin-left: 0px; 220} 221 222.division-images:active .mask { 223 margin-left: 0px; 224} 225 226.division-images img { 227 -webkit-transition: all 1s ease; 228 transition: all 1s ease; 229} 230.division-images:hover img { 231 margin-left: 50%; 232} 233 234.mask:hover { 235 background-color: #a91f27; 236} 237 238.mask:active { 239 background-color: #a91f27; 240} 241 242.contents-about ul{ 243 margin-left: 5%; 244 margin-right:5%; 245} 246 247.contents-about li{ 248 display: table-cell; 249 text-align: center; 250} 251 252.about-images { 253 width: 300px; 254 height: 150px; 255 overflow: hidden; 256 position: relative; 257 margin-bottom: 40px; 258} 259 260.about-images img{ 261 width: 50%; 262 height: 100%; 263} 264 265.about-images .caption { 266 font-size: 18px; 267 color: #ffffff; 268 text-align: center; 269 padding-top: 43%; 270 271} 272 273.about-images .mask { 274 width: 50%; 275 height: 100%; 276 position: absolute; 277 top: 0; 278 left: 0; 279 margin-left: -50%; 280 background-color: #16244b; 281 -webkit-transition: all 1s ease; 282 transition: all 1s ease; 283} 284.about-images:hover .mask { 285 margin-left: 0px; 286} 287 288.about-images:active .mask { 289 margin-left: 0px; 290} 291 292.about-images img { 293 -webkit-transition: all 1s ease; 294 transition: all 1s ease; 295} 296.about-images:hover img { 297 margin-left: 50%; 298} 299 300.mask:hover { 301 background-color: #a91f27; 302} 303 304.mask:active { 305 background-color: #a91f27; 306} 307 308
###補足情報(言語/FW/ツール等のバージョンなど)
html css
回答2件
あなたの回答
tips
プレビュー