I'm new to css I created this footer, I have one problem here. when I try to shrink it the tables disappear and bypass the screen borber and I want it to stay within the screen desired size, would love to know what I did wrong, Thank you.
note: I'm not trying to make it responsive yet I just want to be able to see all the content inside the screen borber.
html
<!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">
<link rel="stylesheet" href="style.css">
<title>footer trial</title>
</head>
<body>
<footer>
<div class="footer">
<div class="table1 tables">
<h2 class="table-title">ABOUT</h2>
<p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, ea corrupti!</p>
</div>
<ul>
<div class="table2 tables">
<h2 class="table-title">INFORMATION</h2>
<nav class="table-links">
<li><a href="#" class="table-link">table-link1</a></li>
<li><a href="#" class="table-link">table-link2</a></li>
<li><a href="#" class="table-link">table-link3</a></li>
</nav>
</div>
<div class="table3 tables">
<h2 class="table-title">CATALOGS</h2>
<nav class="table-links">
<li><a href="#" class="table-link">table-link1</a></li>
<li><a href="#" class="table-link">table-link2</a></li>
<li><a href="#" class="table-link">table-link3</a></li>
</nav>
</div>
<div class="table4 tables">
<h2 class="table-title">SITEMAP</h2>
<nav class="table-links">
<li><a href="#" class="table-link">table-link1</a></li>
<li><a href="#" class="table-link">table-link2</a></li>
<li><a href="#" class="table-link">table-link3</a></li>
</nav>
</div>
<div class="table5 tables">
<h2 class="table-title">CONTACT</h2>
<p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, ea corrupti!</p>
</div>
</ul>
</div>
</footer>
<div>
<a href="#" class="copyright"> all rights reserved 2022</a>
</div>
</body>
</html>
CSS :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
list-style: none;
}
body {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
}
.footer {
background-color: rgb(4, 97, 97);
color: #fff;
gap: 15rem;
padding: 20px;
width: 100%;
display: flex;
justify-content:flex-start;
margin-left: auto;
margin-right: auto;
}
ul {
gap: 7rem;
display: flex;
justify-content:space-evenly;
}
.about {
width: 400px;
text-align: justify;
margin-left: auto;
}
.table1 {
margin-left: 5rem;
margin-bottom: 2rem;
}
.table-title {
color: rgb(4, 224, 151);
line-height: 3rem;
margin-bottom: 1rem;
}
.table-links {
text-align: center;
line-height: 2rem;
font-weight: 400;
}
.table-link {
color: #fff;
text-align: center;
}
.copyright {
background-color: rgb(5, 120, 124);
color: #fff;
padding: 10px;
width: 100%;
display: flex;
justify-content:center;
word-spacing: 0.24rem;
}