Я закончил свою практику и теперь сталкиваюсь с проблемой: когда я расширяю страницу (приблизительно более 1040 пикселей), под нижним колонтитулом остается большое белое пространство, и оно становится больше, если вы расширяете его больше. Это небольшая неприятная проблема, которую я хотел бы исправить, чтобы страница выглядела лучше, и я был бы благодарен, если бы кто-нибудь помог мне в этом
const menuIcon = document.querySelector (".hamburguer-menu");
const navbar = document.querySelector(".navbar");
menuIcon.addEventListener("click", () => {
navbar.classList.toggle("change");
});
:root{
--main-color:#c79864;
}
*{
margin:0px;
padding: 0px;
font-family: 'Lato', sans-serif;
}
body{
overflow-x: hidden;
}
/* HEADER */
ul p{
display: none;
color:#fff;
}
button{
width:30px;
height: 30px;
cursor:pointer;
background: none;
border:none;
font-size: 50px;
color: #fff;
display: block;
margin: 50px 45% 70px auto;
transition: .3s;
}
button i:hover{
transition: .3s;
color:var(--main-color);
}
button:focus{
outline:none;
}
.hamburguer-menu{
width:22px;
position: absolute;
right:7%;
top:6%;
padding: 0px 0px 1px 9px;
z-index: 101;
}
.hamburguer-menu .line1, .line2, .line3{
width: 100%;
height: 3px;
border-radius: 1px;
background-color: var(--main-color);
transition: all .3s;
}
.hamburguer-menu .line2, .line3{
margin-top:4px;
}
.change .menu{
position: fixed;
right: 0;
}
.change .line1{
transform: rotate(-45deg) translate(-5px, 5px);
}
.change .line2{
opacity:0;
}
.change .line3{
transform: rotate(45deg) translate(-5px, -5px);
}
header{
width: 100%;
height: 100px;
background: #282929;
display: flex;
align-items: center;
border-bottom: 1px solid #BDBDBD;
}
header div{
margin-left: 7%;
}
header div p{
float:left;
color: var(--main-color);
cursor:pointer;
font-size:18px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #333;
top:0;
right: -100%;
padding: 80px 0px;
transition: .3s;
transition-timing-function: ease-in-out;
z-index: 100;
}
/* FINISH HEADER */
/* First section */
section{
background-color: #3D3E3E;
}
section .container{
padding: 0px 6%;
position: relative;
animation-name: moveToLeft;
animation-duration: 1.3s;
}
section .container-img{
display: flex;
justify-content: center;
padding-top: 50px;
animation-name: moveToRight;
animation-duration: 1.3s;
}
img{
width: 300px;
height: 300px;
border-radius: 50%;
border: 10px solid #fff;
}
h2{
color:#fff;
text-transform: uppercase;
font-size: 14px;
font-family: Montserrat;
font-weight: 600;
margin-top:65px;
padding-left: 40px;
}
h2::after{
content: '';
position: absolute;
top: 7px;
left: 7%;
width: 29px;
height: 2.5px;
background: linear-gradient(to right, #c79864, #cc7f39);
}
h1{
color:#fff;
font-size: 27px;
font-family: Montserrat;
font-weight: 800;
padding-top: 10px;
}
section div p{
color:#BDBDBD;
font-weight: 400;
line-height: 1.8;
margin-top: 25px;
}
a:visited, a:active, a:focus{
color:#fff;
}
/* Second section */
.second{
background: #3D3E3E;
padding-top: 50px;
}
.second div{
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color:#fff;
padding-bottom: 30px;
}
.second div i{
margin-bottom: 10px;
transition: 0.2s;
cursor: pointer;
}
.second div i:hover{
color: var(--main-color);
}
.second div p{
color: var(--main-color);
font-size: 27px;
font-family: Montserrat;
font-weight: 800;
cursor: auto;
animation-name: moveDown;
animation-duration: 1.3s;
animation-delay: initial;
}
#ig{
animation-name: moveToRight;
animation-duration: 1.3s;
}
#Fb{
animation-name: moveToLeft;
animation-duration: 1.3s;
}
#ws{
animation-name: moveUp;
animation-duration: 1.3s;
}
/* Copyright:; */
footer{
background: #282929;
padding: 10px;
}
footer div p{
margin-top:0px;
text-align: center;
color:#BDBDBD;
}
/* Keyframes */
@keyframes moveToRight {
0%{
transform: translateX(-200px);
opacity: 0;
}
100%{
transform: translateX(0);
opacity: 1;
}
}
@keyframes moveToLeft {
0%{
transform: translateX(200px);
opacity: 0;
}
100%{
transform: translateX(0);
opacity: 1;
}
}
@keyframes moveDown {
0%{
transform: translateY(-200px);
opacity: 0;
}
100%{
transform: translateY(0);
opacity: 1;
}
}
@keyframes moveUp {
0%{
transform: translateY(200px);
opacity: 0;
}
100%{
transform: translateY(0);
opacity: 1;
}
}
/* Media Queries header */
@media only screen and (min-width:1040px){
.hamburguer-menu, ul button{
display: none;
}
header div p{
font-size: 22px;
}
.menu{
position: absolute;
right: 7%;
background: none;
transition: 0s;
top:-5.8%;
width: auto;
}
.menu p{
display: block;
float: right;
color: var(--main-color);
text-transform: uppercase;
font-weight: 600;
}
}
/* Media queries solucion */
@media only screen and (max-width:1039px){
section .container{
padding: 0 7%;
}
}
/* Media queries section 1 */
@media only screen and (min-width:1040px){
.first{
height:460px;
display: flex;
justify-content: center;
}
section .container-img{
display: block;
padding-left: 7%;
padding-right: 10%;
float: left;
}
h2{
margin-top:0px;
}
h2::after{
left:13.3%;
}
.container{
width: 33%;
float: right;
padding: 0 6%;
top:10%;
}
}
/* Media queries section 2 */
@media only screen and (min-width:1040px){
.second{
clear: both;
padding-top: 0px;
}
.second div{
padding-top:30px;
}
.second ul{
display: flex;
justify-content: space-evenly;
padding: 0 25%;
}
.second div p{
margin-top:0px;
padding-top:25px;
}
}
<!DOCTYPE html>
<html lang="en">
<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="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;800&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7e10ce8f03.js" crossorigin="anonymous"></script>
<title>Digna Sulbaran</title>
</head>
<body>
<header>
<div>
<p>Pamela Sulbaran</p>
</div>
<nav class="navbar">
<div class="hamburguer-menu">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="menu">
<p>Contact me</p>
<button><i class="fab fa-instagram"></i></a></button>
<button><i class="fab fa-facebook-f" id="fb"></i></a></button>
<button><i class="fab fa-whatsapp"></i></a></button>
</ul>
</nav>
</header>
<section class="first">
<div class="container-img"><img src="images/digna.jpeg" alt=""></div>
<div class="container">
<div class="mini-container"><h2>about me</h2></div>
<h1>Who I am</h1>
<p>My name is Digna Sulbaran Lorem ipsum dolor sit amet, consectetur adipiscing 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 in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="second">
<div><p>My social media</p></div>
<ul>
<div id="ig"><i class="fab fa-instagram"></i></a></div>
<div id="ws"><i class="fab fa-whatsapp"></i></a></div>
<div id="Fb"><i class="fab fa-facebook-f" id="fb"></i></a></div>
</ul>
</section>
<footer class="copyright">
<div>
<p>All Rights Reserved © 2020 </p>
</div>
</footer>
<script src="js/index.js"></script>
</body>
</html>