When I try to arrange my webpage with a 2 column layout, adding an image messes up the footer. Without the image, the footer looks correct.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SuperRestraunt</title>
<meta charset="utf-8">
<link href="Style.css" rel="stylesheet">
</head>
<body>
<a name="top"></a>
<nav class="nav">
<div class="menu">
<a href="index.html">Home</a>
</div>
<div class="menu">
<a href="shopnow.html">Full Menu</a>
</div>
<br/>
<br/>
</nav>
<main class="wrapper">
<div class="banner">
<h1><span class="name">SuperRestraunt</span></h1>
<h2>Serving the best food in Macon since 2015.</h2>
<h2>Please take a look at our available coupons in the list below.</h2>
<div class="bulletPoints">
<ul>
<li>Buy one burger, get one FREE</li>
<li>30% off one dessert item</li>
</ul>
</div>
<br/>
</div>
<div class="twocolumns">
<p> Are you looking for the best southern cooking in all of middle Georgia? If so, you have looked in the right place!</p>
<p> Our chefs have over 30 years in combined experience</p>
</div>
<h2><em>Contact us for a reservations</em></h2>
<p>Please call at least 2 days ahead for all reservations that include 10 or more people.</p>
</main>
<footer class="footer">
<div class="box">
<p>SuperRestraunt</p>
<p>(478) 302-1981</p>
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="09646867686e6c7b497a7c7c6976794d78367a767477">[email protected]</a></p>
<br/>
</div>
<div class="box">
<p>Check out are Social Media for more coupons and pictures!</p>
<p>Facebook:</p>
<p>Instagram:</p>
<p>Twitter:</p>
</div>
<div class="box">
<p>Locations:</p>
<br/>
<p>543 Cherry St suite b, Macon, GA 31201</p>
</div>
</footer>
<div class="copyright">
<h2>@copyright: Landon Byrd</h2>
<p>Fall 2021, All Rights Reserved</p>
</div>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" />
</a>
</p>
<a href="#top">Back to top of page</a>
</body>
</html>
CSS
/*
Landon Byrd
Fall 2021
Light Blue #06aed5
Darker Blue #086788
Cream White #f2f4f3
Yellow #f0c808
Rich Red #dd1c1a
*/
/* Global Settings */
h1 {text-align: center}
h2 {text-align: center; color: #086788}
.wrapper{width:85%; margin:0 auto; max-width: 960px; }
/* Nav Section */
.nav{width: 85%; margin:0 auto; background-color: #06aed5; text-align: center;}
.menu{float:left; width:25%;}
/* Main Section */
.banner{justify-content: center;background-color: #06aed5; border-radius: 2pt; color: #f2f4f3;}
.bulletPoints{margin-left:35%;}
.name{font-weight: bold; color: #f0c808}
.twocolumns{}
.img1 {float:left; width: 400px; height: 175px; margin:15px}
/* Footer Section */
*{box-sizing: border-box;}
.footer{text-align: center; background-color: #06aed5; color: #086788; }
.box{float:left; width: 33.33%;}
.footer::after{content: ""; clear:both; display:table;}
/* copyright section */
.copyright {text-align: center; background-color: #06aed5; color: #086788; }
Pictures https://i.sstatic.net/Z7Rg2.png
https://i.sstatic.net/nVltf.png
Also, how can I remove the white space between the copyright section and the footer? Thank you in advance.