About adding Footer tag

#1

While working on the Coffee shop project, I thought of expanding the website by adding a footer to it but as soon as I added the footer, the footer content was not visible and instead I got this space before the navbar.

Screenshot (73)
Screenshot (73)1920×1080 443 KB

The HTML code is attached below

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Coffee Store in India</title>
    <link rel="stylesheet" href="coffeeshop.css">
</head>

<body>
    <div class="container">

        <header class="coffee-header">

            <div class="logo">
                <img src="stardollars.png" alt="">
                <span class="logo-text">Stardollars</span>
            </div>

            <nav class="coffee-nav">
                <a href="#">Home</a>
                <a href="#">Products</a>
                <a href="#">About Us</a>
                <a href="#">Stardollars Deliveries</a>
            </nav>

        </header>

        <div class="site-content">
            <div class="back-img">
                <h1 class="quote">Coffee should be black as Hell, strong as death, and sweet as love.</h1>
            </div>
            <div class="cards-list">
                <h1 id="products">Products</h1>
                <div class="cards">
                    <img src="mocha-image.png" alt="" id="product-image">
                    <div>
                        <h2>Mocha</h2>
                        <h3>&#8377 250</h3>
                    </div>
                </div>
                <div class="cards">
                    <img src="americano-image.png" alt="" id="product-image">
                    <div>
                        <h2>Americano</h2>
                        <h3>&#8377 300</h3>
                    </div>
                </div>
                <div class="cards">
                    <img src="cappuccino-image.png" alt="" id="product-image">
                    <div>
                        <h2>Cappuccino</h2>
                        <h3>&#8377 100</h3>
                    </div>
                </div>
                <div class="cards">
                    <img src="latte-image.png" alt=""id="product-image" >
                    <div>
                        <h2>Latte</h2>
                        <h3>&#8377 150</h3>
                    </div>
                </div>
            </div>

        </div>
        
        <footer>
            <div class="footer-list">
                <ul>
                    <li>Terms and Conditions</li>
                    <li>Contact Us</li>
                    <li>Stores and Locations</li>
                </ul>
            </div>
        </footer>
    </div>
</body>

</html>
#2

try adding margin: 0 to html in css