どのようにすれば、ブラウザの幅を変えても1枚目の状態で維持できるようになるのでしょうか?
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="../../tools/style/reset.css" />
<link rel="stylesheet" href="./assets/stylesheets/style.css" />
<title>pc-site</title>
</head>
<body>
<div class="l-wrapper">
<header class="l-header">
<img class="l-header__logo" src="./assets/images/logo.png" alt="ロゴ">
<nav>
<ul class="p-nav__menu">
<li class="p-nav__list">
<a href="" class="p-nav__button">home</a>
</li>
<li class="p-nav__list">
<a href="" class="p-nav__button">about</a>
</li>
<li class="p-nav__list">
<a href="" class="p-nav__button">access</a>
</li>
<li class="p-nav__list">
<a href="" class="p-nav__button">contact</a>
</li>
</ul>
</nav>
</header>
<div class="c-hero"></div>
<main class="l-main">
<h1 class="l-main__title">PC カリキュラム</h1>
<div class="l-contents">
<section class="p-gallery">
<h2 class="p-gallery__tilte">最新の作品</h2>
<ul class="p-gallery__menu">
<li class="p-gallery__list">
<img class="p-gallery__photo" src="./assets/images/production_01.jpg" alt="夕焼けと海">
</li>
<li class="p-gallery__list">
<img class="p-gallery__photo" src="./assets/images/production_02.jpg" alt="砂浜と貝殻">
</li>
<li class="p-gallery__list">
<img class="p-gallery__photo" src="./assets/images/production_03.jpg" alt="砂浜とドリンク">
</li>
<li class="p-gallery__list">
<img class="p-gallery__photo" src="./assets/images/production_04.jpg" alt="桟橋">
</li>
<li class="p-gallery__list">
<img class="p-gallery__photo" src="./assets/images/production_05.jpg" alt="小船">
</li>
<li class="p-gallery__list">
<img class="p-gallery__photo" src="./assets/images/production_06.jpg" alt="夕日の空">
</li>
</ul>
</section>
<section class="p-selfintroduction">
<h2 class="p-selfintroduction__title">自己紹介</h2>
<p class="p-selfintroduction__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
</p>
</section>
</div>
</main>
<footer class="l-fotter">
<div class="c-copyright">
<div class="c-copyright__inner">
<p class="c-copyright__text">
<small>© 2019 example.inc</small>
</p>
</div>
</div>
</footer>
</div>
</body>
</html>
css
@charset "UTF-8";
.l-wrapper {
background-color: #fffaf0;
}
.l-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.l-header__logo {
width: 90px;
height: 90px;
padding: 10px;
}
.p-nav__menu {
display: flex;
}
.p-nav__list {
margin-right: 40px;
}
.p-nav__button {
font-size: 150%;
text-decoration: none;
}
.c-hero {
height: 1000px;
background-image:url(../images/hero.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.l-main__title {
display: flex;
justify-content: center;
padding: 130px 0px 130px 0px;
color: #808080;
font-size: 250%;
}
.p-gallery {
color: #808080;
font-size: 200%;
}
.l-contents {
display: flex;
padding-left: 60px;
}
.p-gallery__tilte {
margin-bottom: 15px;
padding: 2px 0px 0px 20px;
border-left: solid 8px #ff69b4;
background: transparent;
color: #808080;
font-size: 90%;
}
.p-gallery__menu {
display: flex;
flex-wrap: wrap;
}
.p-gallery__photo {
width: 350px;
height: 250px;
margin: 15px 60px 0px 0px;
}
.p-gallery {
width: 400%;
}
.p-selfintroduction {
padding-right: 70px;
}
.p-selfintroduction__title {
margin-bottom: 30px;
padding: 2px 0px 0px 20px;
border-left: solid 8px #ff69b4;
background: transparent;
color: #808080;
font-size: 190%;
}
.p-selfintroduction__text {
color: #808080;
font-size: 150%;
line-height:35px;
}
.c-copyright__inner {
display: flex;
justify-content: center;
padding: 100px 0px 100px 0px;
}
.c-copyright__text {
padding: 30px 50px;
border: solid 2px white;
background: #6495ED;
color: #fff;
font-size: 150%;
box-shadow: 0px 0px 0px 10px #6495ED;
}