Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements?
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Redacted</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<ul>
<li><a href="about.asp">About</a></li>
<li><a href="portfolio.asp">Portfolio</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a id="asides" href="asides.asp">Asides</a></li>
</ul>
<p class="intro">
Bacon Ipsum
</p>
<p class="projects">
Lorem Ipsum
</p>
<footer>Footer placeholder</footer>
</div>
<script src="script.js"></script>
</body>
</html>
Here's the CSS code:
* {
border: 1px solid gold;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 10px 10px;
grid-auto-flow: row;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #ffffff;
}
.intro {
grid-column: 1 / span 4;
grid-row: 2;
}
.projects {
grid-column: 1 / span 4;
grid-row: 3;
}
footer {
grid-column: 1 / span 4;
grid-row: 4;
}
body {
background-color: rgb(124, 252, 188);
margin: 0;
padding: 0;
}
Apologies for the messy formatting, appreciate any help you can provide!