Внезапное появление поля под элементом нижнего колонтитула, продолжающееся минимум 1 секунду. ⇐ CSS

[Anonymous]

Я готовлю этот веб-сайт, и возникает ошибка: внезапно появляется поле под нижним колонтитулом. Я перередактировал сайт почти 3 раза, но не смог избавиться от этого. Кроме того, я потратил достаточно времени, чтобы зафиксировать поле, появляющееся в течение 1 секунды. Ниже прилагается изображение.
Поля под нижним колонтитулом
Кроме того, это не повторяющийся вопрос. Я прочитал все остальные вопросы, доступные здесь. Их проблемы и мои разные. Прочитав один вопрос, я подумал, что нашел решение, и добавил вертикальное выравнивание: внизу в нижнем колонтитуле, но это не сработало.
Коды моей работы прикреплены ниже.

• WEb
• Web

Contact us





Welcome to My Website
This is the main content of the page.
Hello
Hello1
Hello2
Hello3
Hello4
Hello5
Hello6
Hello7

• About Us
• Contact Us
• Business Registration

• Terms and condition
• Privacy policy
• Refund & cancellation policy

Subscribe:










2024 © techieafrohead

All rights reserved



@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');
:root{
--primary-color: #00605f;
--secondary-color: #017479;
--text-dark:#0f172a;
--text-dark-a:#007bff;
--text-light:#94a3b8;
--white:#ffffff;
--hover-color:#E5E4E2;
--max-width: 1400px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Make the body and html take the full height of the viewport */
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
header{
max-width: 100%;
padding: 1rem;
height: 100px;
background: #304352; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #d7d2cc, #304352); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #d7d2cc, #304352); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
body{
position: relative;
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-style: normal;
min-height: 100%;
min-width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;

min-width:250px;
overflow-x:scroll;

-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */

text-align: justify;
text-justify: inter-word;
white-space: normal;
text-wrap: wrap;
hyphens: auto;

overscroll-behavior: none;
}
/* The main content will grow to fill the remaining space */
.content {
flex: 1;
}
img {
pointer-events: none;
}
.nav-container{
max-width: var(--max-width);
margin: 0 auto;
}
nav{
display:flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
nav a{
text-decoration: none;
}

.nav_logo img{
max-width: 70px;
background: var(--white);
padding: .2rem;
border-radius: 2rem;
}
.nav_links{
list-style: none;
display: flex;
align-items: center;
gap:2rem;
}
.link {
outline : 2px solid var(--white);
}
.link a{
text-decoration: none;
font-weight: 600;
color:var(--white);
}
.link {
background-color: var(--secondary-color);
padding: .5rem 1rem;
border-radius: 2rem;
cursor: pointer;
transition: 0.3s;
}
.link:hover, .link:focus{
background-color: var(--primary-color);
}
.contact{
padding: .5rem 1rem;
display: flex;
align-items: center;
gap: 1rem;
font-weight: 600;
color: var(--white);
background-color: var(--primary-color);
border-radius: 2rem;
cursor: pointer;
transition: 0.3s;
}
.contact span{
padding: 5px 8px;
font-size: 1.5rem;
color: var(--primary-color);
background-color: var(--white);
border-radius: 100%;
}
.contact:hover,.contact:focus{
background-color: var(--secondary-color)
}

/* Footer styles */
footer{
max-width: 100%;
background: var(--primary-color);
width: 100%;
margin: 0 auto;
padding: .5rem 1rem;
vertical-align:bottom;
}
footer .wrapper{
display: grid;
grid-template-columns: repeat(3,minmax(0, 1fr));
margin: 1rem;
}
.wrapper ul{
list-style: none;
}
.wrapper .center{
text-align: center;
}
.wrapper ul li a{
text-decoration: none;
color: var(--white);
font-size: .75rem;
font-weight: 300;
}
.wrapper .subscribe{
margin-left: auto;
}
.wrapper .subscribe h6{
color: var(--white);
font-size: .75rem;
font-weight: 300;
margin-bottom: .3rem;
}
.wrapper .subscribe .input-group{
padding: .5rem;
display: flex;
align-items: flex-end;
justify-content: space-between;
font-weight: 400;
color: var(--white);
display: table;
border-collapse: collapse;
width: 100%;
}
.input-group > * {
display: table-cell;
vertical-align: middle;
outline: 1px solid var(--white);
}
.input-group span{
background-color: var(--primary-color);
color: var(--white);
font-size: 1rem;
text-align: center;
padding: 0.5rem;
}
#email,#submit{
width: 100%;
}
.input-group input{
border: 0;
display: block;
width: 100%;
padding:.3rem;
}
.input-group input[type=submit]{
background-color: var(--primary-color);
color: var(--white);
}
.copyright{
text-align: center;
font-size: .75rem;
font-weight: 400;
color: var(--text-light);
}
@media(max-width: 768px){
.nav_links{
display: none;
}
.nav_logo img{
max-width: 50px;
}
.contact{
padding: .3rem .5rem;
gap:.3rem;
}
.contact span{
padding: 3px 5px;
font-size: .9rem;
}
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... n-1-second