2
自分の仕事に合わせて私のページを作ったのですが、何かを除いてページの右側にさらに15pxが表示されました。それ。私はこれを引き起こしたことを確信していませんが、私は実際にそれを理解する助けとそれを修正する方法を援助したいと思います。私のページの右側に奇妙な隙間があります
マイコード：あなたのラッパー<div>上
body {
margin: 0;
padding: 0;
width: 100%;
background: url("images/background.jpg") no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-color: rgb(153, 145, 122);
background: -webkit-linear-gradient(left, aqua, mediumslateblue);
background: -o-linear-gradient(right, aqua, mediumslateblue);
background: -moz-linear-gradient(right, aqua, mediumslateblue);
background: linear-gradient(to right, aqua, mediumslateblue);
font: 1em Verdana, sans-serif;
}
header {
position: inline;
width: 100%;
margin: 0 auto;
margin-top: 0;
padding: 0;
height: 60px;
line-height: 40px;
background-color: black;
}
ul {
margin: 0 auto;
margin-right: 5px
}
.imagesEnlarged {
margin: 0 auto;
width: 45%;
height: 45%;
}
.logo {
color: white;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.nav {
float: right;
color: white;
margin: 0;
margin-top: 0;
}
nav ul li {
display: inline;
float: right;
padding: 0 5px
}
.banner {
background: url("images/background.jpg") no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 200px;
width: 100%;
}
#wrapper {
margin: 5px;
width: 100%;
}
.buttonHolder {
display: block;
position: absolute;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
}
.buttonHolderGallery {
display: block;
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}
#text {
Width: 100%;
padding: 0;
}
li {
list-style-type: none;
float: right;
border-left: 1px solid white;
}
li a {
display: block;
padding: 8px;
background-color: black;
}
li a:hover {
background-color: grey;
}
.gallery {}
footer {
position: fixed;
text-align: left;
bottom: 0;
right: 0;
width: 100%;
height: 65px;
background-color: black;
}
@media only screen and (max-width:1200px) {
body {
font-size: 0.8em;
}
.buttonHolder {
top: 65%;
}
footer {
font-size: 0.9em;
}
.client {
display: inline;
width: 40%;
}
}
@media only screen and (max-width:800px) {
body {
font-size: 0.6em;
}
.buttonHolder {
top: 65%;
}
footer {
font-size: 0.9em;
}
.images {
display: block;
width: 80%;
}
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.white {
color: white;
text-align: center;
float: right
}
.fa {
padding: 20px;
font-size: 30px;
width: 10px;
text-align: center;
text- decoration: none;
border-radius: 50%;
}
.newspaper {
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
-moz-column-count: 3;
/* Firefox */
column-count: 3;
-webkit-column-gap: 60px;
/* Chrome, Safari, Opera */
-moz-column-gap: 60px;
/* Firefox */
column-gap: 60px;
margin-right: 15px;
}
.split {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
-webkit-column-gap: 80px;
/* Chrome, Safari, Opera */
-moz-column-gap: 80px;
/* Firefox */
column-gap: 80px;
margin-right: 15px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<header>
<div class="logo">Photography Masters</div>
<nav>
<ul>
<li><a href="#link"> About</a></li>
<li><a href="#link"> Contact</a></li>
<li><a href="#link"> Gallery</a></li>
<li><a href="#link"> Services</a></li>
</ul>
</nav>
</header>
<section class="banner">
</section>
<div id="wrapper">
<section id="text">
<h1>About Us</h1>
<section class="split">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus elementum feugiat risus, a vulputate enim imperdiet at. Suspendisse nec nisi ut sem efficitur pulvinar. Proin eros ex, scelerisque eget eleifend non, vestibulum sit amet lacus. Sed
dignissim eget libero quis condimentum. Cras ullamcorper aliquet orci ut maximus. Sed congue sem non dui sagittis ultricies non a turpis. Maecenas at mi vestibulum, tempor leo venenatis, sodales massa. Mauris commodo ac mauris a tincidunt. Nunc
et neque sagittis, ultrices tellus nec, tincidunt mi. Nulla pretium leo libero, quis molestie arcu venenatis et. Phasellus dapibus sem ac tristique gravida. Aliquam felis augue, efficitur egestas orci vitae, convallis viverra nisi. Vivamus quis
molestie erat, quis gravida arcu. Aliquam enim orci, accumsan sed justo ut, hendrerit lobortis nibh.
<img class="imagesEnlarged" src=images/about.JPG alt="Model Shoot">
</p>
</section>
<p>Aliquam quis laoreet enim. Nam eu nunc eu sem suscipit ullamcorper bibendum et velit. Nunc sit amet dui elit. Nullam malesuada, leo ut facilisis tristique, neque massa tempor nibh, vel dignissim nulla sapien fringilla orci. Integer sit amet eros vehicula,
eleifend velit vel, venenatis metus. Quisque mattis semper vulputate. Ut eu malesuada est, non luctus ipsum. Etiam sed urna viverra, tincidunt est vitae, malesuada diam. Pellentesque ipsum nisi, posuere sed sem at, ultrices tempus dolor. Cras suscipit
non odio sed tincidunt. Nam ut nisi quis elit semper tempus. Proin ac aliquam quam. Sed luctus convallis hendrerit. </p>
<div class="buttonHolderGallery">
<input class=button type="submit" value="See More">
</div>
</section>
</div>
<footer class="grey2">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
<a class="white"> Copyright Photography Masters 2017</a>
</footer>