-1
ウェブページのサイズを最大幅800pxに変更すると、ウェブサイトは白い画面にスクロールする水平スクロールバーを追加します。私は何が起こるのか、それが起こらないことを望んでいるのかどうかはわかりません。私のコードは以下の通りです。ウェブページのサイズを変更すると、ウェブサイトに白い背景のオーバーフローが追加されます
body {
margin: 0;
}
.Header {
position: fixed;
z-index: 1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid {
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
@media (max-width: 1200px) {
.header {
text-align: left !important;
padding-left: 20px;
}
.img-fluid {
height: 500px;
}
.header2 {
text-align: left;
}
}<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class="headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html"><h1 class = "header" style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class="Facebook">
<a href="https://www.facebook.com/" target="_blank"><img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
</a>
<a class="Instagram">
<a href="https://www.instagram.com/"><img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
</a>
<a class="Youtube">
<a href="https://www.youtube.com/channel/" target="_blank"><img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
</a>
<a class=p reorder>
<button style="background-color: white;">Pre-Order</button>
</a>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="section1" style="background-color: black; color: white; padding-top: 150px;">
<a class="header1" style="padding-left: 200px; display:inline-block; width:85.2%">
<img src="FoldingIcon.PNG" height="45px">
<h1 class="header2" style="font-family: Verdana;font-size: x-large; text-align: start;">Some Header</h1>
<p style="margin-bottom: 200px; font-family: Verdana; color: gray;">
</p>
<img src="Backpack.PNG">
<h2 style="font-family: Verdana; font-size: x-large; text-align:start">Some Header</h2>
<p style="margin-bottom: 300px"></p>
</a>
<p style="color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%;">
_________________________________________________________________________________________________________________________________________________________________________________________</p>
<h1 style="font-family: Verdana;font-size: x-large; text-align: start;padding-bottom: 400px; padding-left: 200px; display:inline-block;
padding-top: 150px;">Completely Customizable</h1>
</div>
あなたが質問した最後の36の質問のうち、**ただ1つを受け入れたのはなぜですか？いくつかの答えを受け入れると、人々はあなたの問題にあなたを助けてくれるでしょう。 –