While I was honing my skills in crafting a website using only HTML and CSS, I encountered an issue. I couldn't figure out how to place the footer beneath the content properly. My goal was to clearly separate each section - header, content, and footer. However, no matter what I tried, the footer seemed to be embedded within the content or merged with it.
<header>
<ul class="Tabbar">
<li><a href="index.html">Home</a></li>
<li><a href="https://www.instagram.com/zhivaldofh/">Profile</a></li>
<li><a href="https://wa.me/+6288233562800">Contact</a></li>
<li><a href="">About</a></li>
<div class="search-bar">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
</form>
</div>
</ul>
</header>
<img class="logoheader" src="image/Logo_1_white.png" alt="Logo">
<content class="konten">
<div class="workout">
<img src="image/Pushup_1.jpeg" alt="Push Up" class="gambar1">
<a href="detailpushup.html">
<div class="desc">
<div class="text">Push Up</div>
</div>
</a>
(remaining content truncated for brevity)
<div class="workout">
<img src="image/Yoga_advance.jpeg" alt="Advanced Yoga" class="gambar1">
<a href="detailyogaadvance.html">
<div class="desc">
<div class="text">Advance Yoga</div>
</div>
</a>
</div>
</content>
<footer>
<p>This page was last edited on 3 February 2022, at 08:31 (UTC).</p>
<p>
Text is available under the Creative Commons Attribution-ShareAlike License 3.0; additional terms may apply. By using this site, you agree to the Terms of Use and Privacy Policy. Wikipedia® is a registered trademark of the Wikimedia Foundation, Inc.,
a non-profit organization.
</p>
</footer>I experimented with placing the footer in a separate block, adjusting margins and padding, but every time I resized the page, the footer would shift to the side of the content.