You need to understand that HTML have hierarchies, so child element style can’t affect parent element sibling. so the fix is to move the clear:both from the a tag(chilg) to p tag(parent).
body {
font-family: "Lucida Console", Monaco, monospace;
background-color: black;
}
h1 {
color: lightgray;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
p {
color: lightgrey;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
clear: both;
}
.button {
border-radius: 8px;
display: flex;
justify-content: center;
background-color: #ad0000;
border: outset #ad0000;
color: darkgrey;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
float: none;
}
.button:hover {
background-color: red;
color: darkgray;
border: inset #ad0000;
}
div#gallery {
margin-bottom: 100px;
}
div.gallery {
margin: 5px;
border: 8px outset #2a2a2a;
float: left;
width: 180px;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 5px;
text-align: center;
color: lightgray;
background: #2a2a2a;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>About us</h1>
<div class="gallery">
<a target="_blank" href="deepfry.doey.png">
<img src="deepfry.doey.png" alt="Doey">
</a>
<div class="desc">Im doey and I just started writing python here in the grand year of 2020, when my friend Banj showed it to me. I also played a major role in putting together this site!</div>
</div>
<p>
<a href="grandarchive 2.html" class="button">Back to the Archive</a>
</p>