Почему нижний колонтитул не заполняет нижние углы экрана? [закрыто] ⇐ CSS

[Anonymous]

Код: Выделить всё

Я думаю, речь идет не о файле html или js, но я также добавил html-код. Часть нижнего колонтитула связана с HTML. Я это проверил. В CSS-коде; Часть .footer важна, но я добавил весь код. Почему нижний колонтитул не заполняет нижние углы экрана? Я пытался решить эту проблему с помощью gpt, но он продолжал говорить: «Используйте маржу» или что-то в этом роде. Я пытался использовать липкий нижний колонтитул, но это тоже не сработало
.footer { background: var(--вторичный); выравнивание текста: по центру; заполнение: 8rem 0; /* */ позиция: относительная; /* */ } .copyright { дополнение: 14px 0; /* t */ маржа: 0; /* */

Код: Выделить всё

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

/* Base */

:root {
--primary: #0051c9;
--secondary: #e5f0ff;
--white: #fff;
--text: #212121;
}

*,
*::after,
*::before {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Poppins", sans-serif;
}

html {
font-size: 10px;
}

body {
background: var(--white);
overflow-x: hidden;
color: var(--text);
}

.page-wrapper {
max-width: 1840px;
margin: 0 auto;
}

.footer {
background: var(--secondary);
text-align: center;
padding: 0;
padding-top: 8rem;
}

.footer h2 {
margin-bottom: 8px;
}

.footer .btn {
margin-top: 36px;
}

.contact {
padding: 60px 130px;
}

.contact-me {
text-align: left;
}

.contact-me h4 {
font-weight: 500;
font-size: 1.6rem;
line-height: 150%;
margin-bottom: 12px;
}

.icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--white);
cursor: pointer;
}

.icon img {
pointer-events: none;
width: 23px;
}

.contact-details {
gap: 8px;
}

.copyright {
padding: 14px;
border-top: 1px solid #cdcdcd;
}

/* End Footer */

Код: Выделить всё

.footer {
background-color: #007bff;
width: 100%;
height: 100px;
position: relative;
bottom: 0;
left: 0;
}

/* Large Screens */

@media (min-width: 1100px) {
html{
font-size: 11px;
}
}

@media (min-width: 1480px) {
html{
font-size: 13px;
}
}

/* Small Screens */

@media (max-width: 1000px) {
html{
font-size: 9px;
}

.section {
padding: 6rem 2rem;
}

.footer {
padding: 3rem 0px 0px;
}

.contact {
padding: 40px 60px;
}
}

@media (max-width: 820px) {
html{
font-size: 8px;
}

.slick-dots li::before {
width: 28px;
height: 8px;
margin: 0;
}

.slick-dots li {
margin: 0 8px;
}

.slick-dots {
margin-left: -24px;
}
}

@media (max-width: 768px) {
.testimonials-container {
max-width: 90%;
}

.message {
min-height: unset;
max-width: 700px;
}

.navbar {
flex-direction: column;
height: 90vh;
padding: 60px 0;
border: 4px solid var(--primary);
border-top-color: transparent;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
justify-content: space-evenly;
transition: 0.5s ease;
transform: translateY(-1500px)
}

.nav-links {
flex-direction: column;
}

.brand {
margin-bottom: 30px;
}

.menu-btn {
display: block;
background-color: var(--primary);
height: 45px;
width: 45px;
position: fixed;
top: 22px;
right: 20px;
z-index: 2222;
border-radius: 50%;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
text-align: center;
cursor: pointer;
}

.menu-btn-icon,
.menu-btn-icon::before,
.menu-btn-icon::after{
width: 25px;
height: 2px;
background-color: var(--white);
display: inline-block;
transition: 0.2s all;
}

.menu-btn-icon {
position: relative;
margin-top: 22px;
}

.menu-btn-icon::before,
.menu-btn-icon::after {
position: absolute;
content: "";
left: 0;
}

.menu-btn-icon::before {
top: -0.8rem;
}

.menu-btn-icon::after {
top: 0.8rem;
}

.menu-btn.active .menu-btn-icon::after {
transform: rotate(-135deg);
top: 0;
}

.menu-btn.active .menu-btn-icon::before {
transform: rotate(135deg);
top: 0;
}

.menu-btn.active .menu-btn-icon {
background-color: transparent;
}

.navbar.mobile {
transform: translateY(0);
}

.section {
padding: 4.5rem 1.4rem;
}

.hero-image {
width: 60%;
}

.hero-content {
padding-top:  30px;
width: 90%;
text-align: center;
}

.hero-content .btn {
margin: 20px 0;
}

.hero h2 span {
display: none;
}

.achievements {
justify-content: center;
}

.section.flex,
.project {
flex-direction: column-reverse;
}

.project:nth-of-type(1) {
flex-direction: column;
margin-bottom: 30px;
}

.project-details,
.project-image {
width: 90%;
text-align: center;
}

.skills-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 70%;
margin: 0 auto;
}

.skill {
margin: 0 auto;
width: 175px;
}

.footer {
padding-bottom: 0;
}

.contact {
flex-direction: column;
padding: 30px 50px;
}

.contact-me {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
margin: 2.5px 0;
}

.contact-details {
justify-content: center;
}

.contact-me h4{
margin-bottom: 4px;
}
}

@media (max-width: 450px) {
.achievements {
flex-direction: column;
}

.achievements span {
margin-right: 20px;
}

.hero-content {
padding: 0;
}

.skills-list {
grid-template-columns: 1fr;
}

.skill {
width: 90%;
}

.testimonials-container {
padding: 25px 5px;
}

.message {
margin: 0 5px;
}

.slick-dots {
margin-left: -6px;
}

.contact-me {
flex-direction: column;
}

.contact-me h4 {
margin-bottom: 10px;
}

.copyright {
flex-direction: column;
}

Я пробовал подобные модификации, но это не сработало. Он продолжает получать белую рамку.

Подробнее здесь: https://stackoverflow.com/questions/790 ... the-screen