footer ist nicht sticky?

Es ist irgendwie etwas ganz komisch...

Der Footer der vom code her eigentlich sticky am ende der Website seien sollte, ist es nicht.

Ich habe bei .footer auch mal provisorisch background: red; reingemacht, aber da passiert irgendwie auch nicht so viel..

kann mir da jemand helfen, ich und Chat GPT checken es nicht xD (bin noch anfänger)

hier der HTML code vom footer:

<section class="footer">

<div class="footer-row">

<div class="footer-col">

<h4>Info</h4>

<ul class="links">

<li><a href="#">About Us</a></li>

<li><a href="#">Compressions</a></li>

<li><a href="#">Customers</a></li>

<li><a href="#">Service</a></li>

<li><a href="#">Collection</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Explore</h4>

<ul class="links">

<li><a href="#">Free Designs</a></li>

<li><a href="#">Latest Designs</a></li>

<li><a href="#">Themes</a></li>

<li><a href="#">Popular Designs</a></li>

<li><a href="#">Art Skills</a></li>

<li><a href="#">New Uploads</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Legal</h4>

<ul class="links">

<li><a href="#">Customer Agreement</a></li>

<li><a href="#">Privacy Policy</a></li>

<li><a href="#">GDPR</a></li>

<li><a href="#">Security</a></li>

<li><a href="#">Testimonials</a></li>

<li><a href="#">Media Kit</a></li>

</ul>

</div>

<div class="footer-col">

<h4>Newsletter</h4>

<p>

Subscribe to our newsletter for a weekly dose

of news, updates, helpful tips, and

exclusive offers.

</p>

<form action="#">

<input type="text" placeholder="Your email" required>

<button type="submit">SUBSCRIBE</button>

</form>

<div class="icons">

<i class="fa-brands fa-facebook-f"></i>

<i class="fa-brands fa-twitter"></i>

<i class="fa-brands fa-linkedin"></i>

<i class="fa-brands fa-github"></i>

</div>

</div>

</div>

</section>

CSS Code vom footer:

.footer {

position: fixed;

bottom: 0;

left: 50%;

transform: translate(-50%, -50%);

max-width: 1280px;

width: 95%;

background: red;

border-radius: 6px;

}

.footer .footer-row {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

gap: 3.5rem;

padding: 60px;

background-color: darkslategrey;

}

.footer-row .footer-col h4 {

color: #fff;

font-size: 1.2rem;

font-weight: 400;

}

.footer-col .links {

margin-top: 20px;

}

.footer-col .links li {

list-style: none;

margin-bottom: 10px;

}

.footer-col .links li a {

text-decoration: none;

color: #bfbfbf;

}

.footer-col .links li a:hover {

color: #fff;

}

.footer-col p {

margin: 20px 0;

color: #bfbfbf;

max-width: 300px;

}

.footer-col form {

display: flex;

gap: 5px;

}

.footer-col input {

height: 40px;

border-radius: 6px;

background: none;

width: 100%;

outline: none;

border: 1px solid #7489C6 ;

caret-color: #fff;

color: #fff;

padding-left: 10px;

}

.footer-col input::placeholder {

color: #ccc;

}

.footer-col form button {

background: #fff;

outline: none;

border: none;

padding: 10px 15px;

border-radius: 6px;

cursor: pointer;

font-weight: 500;

transition: 0.2s ease;

}

.footer-col form button:hover {

background: #cecccc;

}

.footer-col .icons {

display: flex;

margin-top: 30px;

gap: 30px;

cursor: pointer;

}

.footer-col .icons i {

color: #afb6c7;

}

.footer-col .icons i:hover {

color: #fff;

}

@media (max-width: 768px) {

.footer {

position: relative;

bottom: 0;

left: 0;

transform: none;

width: 100%;

border-radius: 0;

}

.footer .footer-row {

padding: 20px;

gap: 1rem;

}

.footer-col form {

display: block;

}

.footer-col form :where(input, button) {

width: 100%;

}

.footer-col form button {

margin: 10px 0 0 0;

}

}

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code

Beliebte Themen