Footer stays under side bar

My footer keeps going under my side bar and not in the middle bottom. I’ve tried everything.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="capture ability">
  <meta name="description" content="Information on accessible photography">
  <meta name="author" content="Louis Gaudry">
  <meta http-equiv="refresh" content="30">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tech1 - CaptureAbility</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
  <div id="header">
    <div>
      <a href="index.html" class="logo">
      <h1>CaptureAbility</h1>"Capturing Dreams Beyond Barriers: Empowering Photographers of All Abilities!"</a>
    </div>
    <ul>
      <li>
        <a href="index.html">home</a>
      </li>
      <li>
        <a href="technology.html">technology</a>
      </li>
      <li>
        <a href="inspirational.html">Inspirational stories</a>
      </li>
      <li>
        <a href="contact.html">contact</a>
      </li>
    </ul>
  </div>
  <div id="body">
    <div id="blog">
      <h3>Pacsafe Camsafe 75 Neck Strap</h3>
      <h5>Camera Strap, July 16, 2020</h5><img src="images/neck-strap.jpg" width="209" height="200" alt="Image of a camera strap">
      <p>I chose the Pacsafe Camsafe 75 neck strap. My reasoning for choosing it was. I have a hard time flipping a camera strap over my head. With this particular one, it has wiring inside the strap and covered in foam. That makes it more rigid and I’m able to pull it over my head.</p>&nbsp;
    </div>
    <div id="sidebar">
      <div class="ex1">
        <h3><strong>recent post</strong></h3>
        <ul>
          <li>
            <a href="tech19">The Power of The Iphone</a>
          </li>
          <li>
            <a href="tech18">Outdoor Camera Mount</a>
          </li>
          <li>
            <a href="tech17">Wheelchair Camera Mount</a>
          </li>
          <li>
            <a href="tech15">Accessiblity challenge is resolved in a dream</a>
          </li>
          <li>
            <a href="tech14">Mini tripod's</a>
          </li>
          <li>
            <a href="tech13">Fixed Lens Camera’s</a>
          </li>
          <li>
            <a href="tech12">Creating a New Device</a>
          </li>
          <li>
            <a href="tech11">The Accessible Tripod</a>
          </li>
          <li>
            <a href="tech10">Accessible Device</a>
          </li>
          <li>
            <a href="tech9">Window Photography</a>
          </li>
          <li>
            <a href="tech8">So you want to control your camera with a tablet/cellphone</a>
          </li>
          <li>
            <a href="tech7">Pixel Wireless Shutter Release Cable Timer Remote Control</a>
          </li>
          <li>
            <a href="tech6">Panasonic Lumix Fz300 VS Nikon D5600</a>
          </li>
          <li>
            <a href="tech5">How do I hold a Camera (Part 1)</a>
          </li>
          <li>
            <a href="tech4">How do I hold a Camera (Part 2)</a>
          </li>
          <li>
            <a href="tech3">Loupedeck+ Plus Photo and Video Editing Console</a>
          </li>
          <li>
            <a href="tech2">Panasonic DMW-RSL1 Remote Shutter Release ( For Lumix FZ300 )</a>
          </li>
          <li>
            <a href="tech1">Pacsafe Camsafe 75 Neck Strap</a>
          </li>
        </ul>
      </div>
      <div id="footer">
        © 2024 CaptureAbility All rights reserved
      </div>
   
</body>
</html>
body {
	background: #800020;
	font-family: Arial, Helvetica, sans-serif;
	font-stretch: ultra-condensed; 
	font-size: 18px;
	line-height: 2;
	margin : 0;
	padding: 0;
}
#header {
	margin: 0 auto;
	padding: 0;
	width: 960px;
}
#header div {
	margin: 0;
	overflow: hidden;
	padding: 59px 0 57px;
}
#header div .logo {
	color: #fff;
	display: block;
	float: left;

	margin: 0;
	padding: 0 0 0 13px;
	text-decoration: none;
}
#header div .logo h1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 60px;
	font-weight: normal;
	margin: 0;
	padding: 0;
	text-transform: capitalize;
}
#header div span {
	color: #fff;
	display: block;
	font-size: 16px;
	float: right;
	letter-spacing: 1px;
	margin: 0;
	padding: 0 30px 0 0;
	text-transform: uppercase;
}
#header div span b {
	display: block;
	font-size: 27px;
	font-weight: normal;
	letter-spacing: 2px;
	margin: 0;
	padding: 10px 0 0;
}
#header ul {
	background: #000;
	border-top: 7px solid #fff;
	margin: 0;
	overflow: hidden;
	padding: 2px 0 0;
}
#header ul li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
}
#header ul li a {
	color: #fff;
	display: block;
	letter-spacing: 1px;
	line-height: 70px;
	margin: 0;
	padding: 0px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 240px;
}

#body {
	background: #e4e4e4;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	width: 960px;
}
#body h1, #body h2, #body h3 {
	margin: 0;
	padding: 0;
}
#body p {
	line-height: 30px;
	letter-spacing: 100;
	margin: 0;
	padding: 0;
	text-align: justify;
}
#body .header {
	background: #fff;
	margin: 0;
	padding: 40px;
}
#body .header h1 {
	color: #0f7c7c;
	font-family: Georgia, serif;
	font-size: 38px;
	font-weight: normal;
	letter-spacing: 2px;
	margin: 0;
	padding: 20px 0;
	text-align: center;
	text-transform: uppercase;
}
#body .header p a {
	color: #000;
}
#body .header p a:hover {
	color: #464646;
}
#body .body {
	background: #000;
	margin: 0;
	padding: 45px 40px;
	text-align: center;
}
#body .body h1 {
	color: #ffaf04;
	font-family: Georgia, serif;
	font-size: 48px;
	font-weight: normal;
	letter-spacing: 2px;
	margin: 0;
	padding: 0 0 25px;
	text-transform: uppercase;
}
#body .body small {
	color: #fff;
	display: block;
	font-size: 24px;
	height: 30px;
	letter-spacing: 1px;
	line-height: 30px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	width: 738px;
}
#body .body small span {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width: 628px;
}
#body .body small a {
	background: url(../images/interface.png) no-repeat 0 0;
	color: #fff;
	display: block;
	float: right;
	font-size: 14px;
	height: 30px;
	line-height: 30px;
	letter-spacing: 0;
	text-decoration: none;
	text-indent: 10px;
	text-transform: capitalize;
	width: 110px;
}
#body .body small a:hover {
	background-position: -135px 0;
}
#body .footer .article {
	background: none;
	border-right: 1px solid #afafaf;
	float: left;
	margin: 0;
	min-height: 590px;
	overflow: auto;
	padding: 0;
	width: 600px;
}
#body .footer .article div {
	float: none;
	margin: 0;
	overflow: hidden;
	padding: 0 40px;
	width: auto;
}
#body .footer .article span {
	color: #000;
	display: block;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 30px;
	margin: 0;
	padding: 0;
	text-align: justify;
}
#body .footer .article b a:hover {
	color: #464646;
}
#body .footer .article img {
	border: 1px solid #9d9d9d;
	display: block;
	float: left;
	margin: 10px 20px 0 0;
}
#body .footer .article p {
	color: #464646;
}
#body .footer .article p a {
	color: #464646;
	text-decoration: underline;
}
#body .footer .article p a:hover {
	color: #115858;
}
#body .footer .article p a.more {
	text-decoration: none;
}
#body .footer .article ul {
	margin: 0;
	overflow: hidden;
	padding: 30px 0 0 40px;
}
#body .footer .article ul li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0 40px 20px 0;
	width: 240px;
}
#body .footer .aside {
	float: left;
	margin: 0;
	padding: 0;
	width: 319px;
}
#body .footer .aside div {
	border-bottom: 1px solid #9d9d9d;
	margin: 0;
	padding: 0 0 20px;
}
#body .footer .aside div a.figure {
	display: block;
	margin: 10px 0 10px 40px;
}
#body .footer .aside div a.figure:hover {
	opacity: 0.8;
}
#body .footer .aside div a img {
	border: 0;
	display: block;
	margin: 0;
	padding: 0;
}
#body .footer .aside div p {
	padding-left: 40px;
}
#body .footer .aside form {
	margin: 0;
	padding: 0;
}
#body .footer .aside form #fullname, #body .footer .aside form #email {
	color: #000;
	border: 1px solid #9d9d9d;
	display: block;
	font-size: 14px;
	height: 38px;
	line-height: 38px;
	margin: 0 0 10px 40px;
	padding: 0 5px;
	text-transform: capitalize;
	width: 267px;
}
#body .footer .aside form #subscribe {
	background: url(../images/interface.png) no-repeat 0 -70px;
	border: 0;
	color: #6c6c6c;
	display: block;
	font-size: 14px;
	height: 24px;
	margin: 0 0 0 233px;
	padding: 0;
	text-indent: -99999px;
	width: 86px;
}
#body .footer .aside form #subscribe:hover {
	background-position: -135px -70px;
}
#body .article, #body .section {
	margin: 0;
	overflow: hidden;
	padding: 0;
}
#body .article {
	background: #212121;
	padding: 30px 0 30px 40px;
}
#body .article h2 {
	color: #ffaf04;
	font-family: Georgia, serif;
	font-size: 36px;
	font-weight: normal;
	letter-spacing: 2px;
	line-height: 48px;
	margin: 0;
	padding: 0 48px;
	text-align: center;
}
#body .article h2 a {
	color: #ffaf04;
	text-decoration: none;
}
#body .article h2 a:hover {
	color: #c19027;
}
#body .article div {
	float: left;
	margin: 0 40px 0 0;
	padding: 0;
	width: 420px;
}
#body .article div a.figure {
	display: block;
	margin: 25px 0;
	padding: 0;
	opacity: 0.8;
}
#body .article div a.figure:hover {
	opacity: 1;
}
#body .article div img {
	border: 1px solid #4b4b4b;
	display: block;
}
#body .article div span {
	color: #fff;
	display: block;
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 30px;
	margin: 0;
	padding: 0;
	text-align: justify;
}
#body .article div b a:hover {
	color: #c7c7c7;
}
#body .article div p, #body .article div p a {
	color: #c7c7c7;
}
#body .article div p a:hover {
	color: #fff;
}
#body .section {
	margin: 0;
	overflow: hidden;
	padding: 24px 40px 20px;
}
#body .section div {
	margin: 0;
	padding: 0;
}
#body .section .featured {
	border-right: 1px solid #afafaf;
	float: left;
	min-height: 420px;
	overflow: hidden;
	padding-top: 10px;
	width: 460px;
}
#body .section .featured b {
	color: #0e5a5a;
	display: block;
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 30px;
	margin: 0;
	padding: 0 40px 0 0;
	text-transform: uppercase;
}
#body .section .featured b a {
	color: #0e5a5a;
}
#body .section .featured b a:hover {
	color: #009999;
}
#body .section .featured img {
	border: 1px solid #fff;
	float: left;
	margin: 10px 20px 0 0;
}
#body .section .featured p {
	color: #464646;
	padding: 0 40px 0 0;
	text-align: left;
}
#body .section .featured p a {
	color: #464646;
}
#body .section .featured p a:hover {
	color: #000;
}
#body .section .aside {
	float: left;
	width: 419px;
}
#body .section .aside div {
	border-top: 1px solid #afafaf;
	padding: 30px 0 28px 40px;
}
#body .section .aside div:first-child {
	border: none;
	padding-top: 10px;
}
#body .section .aside div h3 {
	color: #0e5a5a;
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 30px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}
#body .section .aside div ul {
	margin: 0;
	padding: 0;
}
#body .section .aside div ul li {
	background: url(../images/bullet.png) no-repeat 0 14px;
	color: #464646;
	list-style: none;
	line-height: 30px;
	margin: 0;
	padding: 0 0 0 10px;
}
#body .section .aside div ul li a {
	color: #464646;
}
#body .section .aside div ul li a:hover {
	color: #000;
}
#body .section .aside a.figure {
	float: left;
	margin: 10px 20px 0 0;
}
#body .section .aside a.figure:hover {
	opacity: 0.8;
}
#body .section .aside img {
	border: 1px solid #fff;
}
#body .section .aside p {
	color: #464646;
	padding: 0;
	text-align: left;
}
#body .section .aside p a {
	color: #464646;
}
#body .section .aside p a:hover {
	color: #000;
}
#body .footer {
	margin: 0;
	overflow: hidden;
	padding: 30px 0 20px;
}
#body .footer h3 {
	color: #0e5a5a;
	font-family: "Times New Roman", Times, serif;
	font-size: 30px;
	font-weight: normal;
	margin: 0;
	padding: 17px 0 15px 40px;
	text-transform: uppercase;
}
#body > .featured {
	margin: 0;
	overflow: hidden;
	padding: 50px 40px 10px;
}
#body > .featured img {
	border: 1px solid #fff;
	display: block;
	float: left;
	margin: 8px 30px 10px 0;
}
#body > .featured b {
	color: #0e5a5a;
	display: block;
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 30px;
	margin: 0;
	padding: 0;
}
#body > .featured b a {
	color: #0e5a5a;
}
#body > .featured b a:hover {
	color: #009999;
}
#body > .featured p, #body > .featured p a {
	color: #464646;
}
#body > .featured p a:hover {
	color: #115858;
}
#body > ul {
	margin: 0;
	padding: 0 40px 43px;
}
#body > ul li {
	border-top: 1px solid #afafaf;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}
#body > ul li:first-child {
	border: 0;
}
#body > ul li div {
	border-left: 1px solid #afafaf;
	float: left;
	margin: 0;
	overflow: hidden;
	padding: 22px 0 30px 40px;
	width: 520px;
}
#body > ul li div p, #body > ul li div p a, #body > ul li div ul li a {
	color: #464646;
}
#body > ul li div p a:hover, #body > ul li div ul li a:hover {
	color: #115858;
}
#body > ul li div:first-child {
	border: 0;
	padding: 28px 0 10px 0;
	width: 319px;
}
#body > ul li div:first-child h3 {
	color: #0e5a5a;
	font-family: Georgia, serif;
	font-size: 48px;
	font-weight: normal;
	padding: 0 30px 5px 0;
	text-align: right;
	text-transform: capitalize;
}
#body > ul li div:first-child h3 a {
	color: #0e5a5a;
	text-decoration: none;
}
#body > ul li div:first-child h3 a:hover {
	color: #009999;
}
#body > ul li div:first-child p {
	padding: 0 30px 0 0;
	text-align: right;
}
#body > ul li div ul {
	margin: 0;
	padding: 0;
}
#body > ul li div ul li {
	background: url(../images/bullet.png) no-repeat 0 14px;
	border: 0;
	color: #464646;
	letter-spacing: 1px;
	line-height: 30px;
	list-style: none;
	margin: 0;
	padding: 0 0 0 15px;
}
#body > ul li div img {
	border: 1px solid #fff;
	float: left;
	margin: 10px 18px 10px 0;
}
#body #blog {
	float: left;
	margin: 27px 0 30px;
	min-height: 932px;
	padding: 0 40px;
	width: 599px;
}
#body #blog p {
	padding: 15px 0;
}
#body #blog p, #body #blog p a {
	color: #464646;
}
#body #blog p a:hover {
	color: #115858;
}
#body #blog b {
	color: #000;
	display: block;
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 30px;
	margin: 0;
	padding: 0;
}
#body #blog b a {
	color: #0e5a5a;
}
#body #blog b a:hover {
	color: #009999;
}
#body #blog img {
	border: 1px solid #000;
}
#body #sidebar {
	float: left;
	margin: 27px 0 30px;
	padding: 0;
	width: 240px;
}
#body #sidebar div {
	border-top: 1px solid #afafaf;
	margin: 0;
	padding: 40px 0 40px 40px;
}
#body #sidebar div:first-child {
	border: 0;
	padding: 15px 0 40px 40px;
}
#body #sidebar div h3 {
	color: #fff;
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 30px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}
#body #sidebar div ul {
	margin: 0;
	padding: 0;
}
#body #sidebar div ul li {
	background: url(../images/bullet.png) no-repeat 0 14px;
	list-style: none;
	margin: 0;
	padding: 0 0 0 10px;
}
#body #sidebar div ul li a {
	color: #fff;
	letter-spacing: 1px;
	line-height: 30px;
	margin: 0;
	padding: 0;
	text-decoration: none;	
}
#body #sidebar div ul li a:hover {
	 text-decoration: underline;
  text-decoration-color: greenyellow;
}
#body .content {
	margin: 0;
	min-height: 900px;
	overflow: hidden;
	padding: 40px;
}
#body .content h3 {
	color: #0e5a5a;
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 30px;
	margin: 0;
	padding: 0;
}
#body .content p {
	color: #464646;
	padding: 0 0 30px;
}
#body .content p a {
	color: #464646;
}
#body .content p a:hover {
	color: #115858;
}
#body .content img {
	border: 1px solid #fff;
	display: block;
	float: left;
	margin: 40px 0 0 10px;
}
#body .content form {
	margin: 0;
	padding: 0;
}
#body .content form label {
	display: block;
	margin: 0 0 15px;
	overflow: hidden;
	padding: 0;
}
#body .content form label span {
	clear: both;
	display: block;
	float: left;
	height: 30px;
	line-height: 30px;
	margin: 0;
	padding: 0 10px 0 0;
	text-align: right;
	text-transform: capitalize;
	width: 108px;
}
#body .content form label input {
	background: #fff;
	border: 1px solid #bbb;
	float: left;
	font-size: 14px;
	height: 28px;
	line-height: 28px;
	margin: 0;
	padding: 0 5px;
	width: 458px;
}
#body .content form label textarea {
	background: #fff;
	border: 1px solid #bbb;
	float: left;
	font-size: 14px;
	height: 275px;
	overflow: auto;
	padding: 5px;
	width: 458px;
}
#body .content form #send {
	background: url(../images/interface.png) no-repeat 0 -35px;
	border: 0;
	display: block;
	height: 30px;
	margin: 0 0 0 117px;
	text-indent: -99999px;
	width: 130px;
}
#body .content form #send:hover {
	background-position: -135px -35px;
}
 img{
   max-width: 100%;  
   display: block;
   position: left;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.center1 {
  display: block;
 padding-left: 40px;
 
	
}

div.ex1 {
  background-color: #800020;
  width: 200px;
  height: 300px;
  overflow: scroll;
}
    hr {
        position: relative;
        top: 20px;
        border: none;
        height: 3px;
        background: black;
        margin-bottom: 50px;
    }

I’ve edited your code for readability a bit, you placed closing backticks of the HTML block after your CSS block

Welcome to the forum @louis5

Try placing two div closing tags above the div footer element.

Happy coding

That helped a bit but now its out of the body. Look at very bottom right.