【質問】空白ができてしまう
解決したいこと
下の画像のように右側にスクロールすると空白がでてきてしまう。
検証を使って空白が何か調べてみても何にもヒットしません。
html.index
<body>
<header>
<div class="header-logo">
<a href="/index.html"><img src="image/logo.jpg" height="50px" width="50px"></a>
</div>
<i class="fa fa-bars menu-icon"></i>
<div class="header-list">
<nav>
<ul>
<li><a href="#profile"><i class="fas fa-user-alt"></i>PROFILE</a></li>
<li><a href="#works"><i class="fas fa-book-open"></i>WORKS</a></li>
<li><a href="#skill"><i class="fas fa-pencil-alt"></i>SKILLS</a></li>
<li><a href="#contact"><i class="far fa-envelope"></i>CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div class="main-visual">
<h1>PAPAPAPE's PORTFOLIO</h1>
<img src="image/mein-visual.jpg" width="100%">
</div>
<div class="main">
<!-- 自己紹介 -->
<div class="container first">
<h2 id="profile" class="section-title">自己紹介</h2>
<div class="profile">
<img src="image/profile.jpg" height="250px" width="250px">
<ul>
<li>名前:ぱぱぱぺ</li>
<li>出身:埼玉県</li>
<li>趣味:大相撲観戦</li>
<li class="message">ひとこと:<br>プログラミング歴は浅いですが、<br>コミュニケーションを大切に迅速丁寧な仕事を心がけます！</li>
</ul>
</div>
</div>
<!-- サイト集 -->
<div class="container second">
<div class="works">
<h2 id="works" class="section-title">WORKS</h2>
<div class="work">
<a href="https://www.google.com/?hl=ja"><img src="image/work.png" height="200px" width="200px">
<h3>○○のサイト</h3>
<p>説明文</p></a>
</div>
<div class="work">
<a href="https://www.yahoo.co.jp/"><img src="image/work.png" height="200px" width="200px">
<h3>○○のサイト</h3>
<p>説明文</p></a>
</div>
<div class="work">
<a href="https://www.google.com/?hl=ja"><img src="image/work.png" height="200px" width="200px">
<h3>○○のサイト</h3>
<p>説明文</p></a>
</div>
<div class="work">
<a href="https://www.yahoo.co.jp/"><img src="image/work.png" height="200px" width="200px">
<h3>○○のサイト</h3>
<p>説明文</p></a>
</div>
</div>
</div>
<!-- スキル -->
<div class="container third">
<h2 id="skill" class="section-title">スキル</h2>
<div class="skills">
<div class="skill">
<i class="fab fa-html5"></i>
<h3>HTML<br> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
<p>テキスト</p>
</div>
<div class="skill">
<i class="fab fa-css3-alt"></i>
<h3>CSS<br> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
<p>テキスト</p>
</div>
<div class="skill">
<i class="fab fa-js-square"></i>
<h3>JavaScript<br> <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
<p>テキスト</p>
</div>
<div class="skill ">
<i class="fab fa-wordpress"></i>
<h3>WordPress<br> <i class="fas fa-star"></i></h3>
<p>テキスト</p>
</div>
<div class="skill">
<i class="fab fa-node"></i>
<h3>Node.js<br> <i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
<p>テキスト</p>
</div>
<div class="skill">
<i class="fas fa-database fab"></i>
<h3>MYSQL<br> <i class="fas fa-star"></i><i class="fas fa-star"></i></h3>
<p>テキスト</p>
</div>
</div>
</div>
<!-- 連絡先 -->
<div class="container forth">
<h2 id="contact" class="section-title">CONTACT</h2>
<div class="contact-means">
<a href="https://twitter.com/papapape1031"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<footer>
</footer>
</body>
style.css
/* 共通 */
body, h1, h2, h3, p, ul, div{
margin: 0;
font-size: 20px;
}
.container{
height: 100vh;
padding: 80px 50px 0 50px;
text-align: center;
}
.section-title{
padding-top: 130px;
font-size: 3rem;
}
a{
text-decoration: none;
color: black;
}
li{
list-style: none;
}
/* ヘッダー、トップ */
header{
height: 70px;
width: 100%;
background-color:rgb(255, 255, 255);
opacity: 0.7;
position: fixed;
top: 0px;
z-index: 10;
}
.header-logo{
float: left;
margin: 10px 400px 10px 30px;
}
.header-list li{
font-size: 18px;
float: left;
line-height: 70px;
padding-right: 50px;
}
.main-visual h1{
font-size: 5rem;
position: absolute;
top: 50%;
left: 250px;
}
.menu-icon {
color: white;
float: right;
font-size: 25px;
padding: 21px 0;
display: none;
}
/* 自己紹介 */
.first{
background-color:rgb(239, 243, 239, 0.959);
}
.profile{
width: 80%;
padding: 0 300px;
}
.profile img{
border: 5px solid black;
border-radius: 50%;
float: left;
}
.profile ul{
float: left;
}
.profile li{
line-height: 60px;
text-align: left;
}
.profile .message{
line-height: 36px;
}
/* サイト集 */
.second{
background-color: rgb(251, 180, 47)
}
.work{
float: left;
width: 25%;
text-align: center;
padding-top: 40px;
}
.work img{
border: 2px solid black;
}
.work p{
font-size: 16px;
padding: 0 30px;
}
/* スキル */
.third{
background-color: #1d809f;
height: 150vh;
color: white;
}
.skill{
float: left;
width: 33%;
margin-bottom: 15px;
padding-top: 80px;
}
.skill .fab{
height: 180px;
width: 200px;
background-color: white;
border-radius: 50%;
font-size: 150px;
color: #1d809f;
padding-top: 20px;
}
.skill h3 .fas{
color: gold;
}
.skill h3{
margin: 10px 0 0 0 ;
}
.skill p{
padding: 0 30px;
font-size: 16px;
margin: 0 0 15px 0 ;
}
/* 連絡先 */
.forth{
background-color: rgb(240, 245, 255);
height: 25vh;
}
.forth .section-title{
padding-top: 0px;
}
.fa-twitter{
font-size: 50px;
}
自分で試したこと
コードの見直し
検証ツールを使い原因を探ってみましたがわからないため質問させていただきました。
0
