So I'm trying to create a fake website, and for some reason even though in my code I place the footer tag outside of my main tag, whenever I load the website and use the inspect tool, it says the footer tag is inside of my main tag. This is the code I typed:
<main>
<section class="one">
<article>
<h1>What is Hair Day?</h1>
<p>Based in Madison, Wisconsin, Hair Day is a boutique hair salon that specializes in cut, color and styling. Hair Day also offers makeup and nail services, prides itself on its warm and relaxing atmosphere and is best known for edgy hair colors and on-trend cuts. </p>
</article>
</section>
<section class="two">
<article>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
</section>
<section class="three">
<article>
<h2>Customer Reviews</h2>
<ul>
<li>Awesome hair styling for an affordable price!</li>
<li>Got my hair done here, 10/10 would go here again.</li>
</ul>
</article>
</section>
<section class="four">
<article>
<h2>Our times</h2>
<table class="times">
<tr>
<th>Monday</th>
<td>11AM-7PM</td>
</tr>
<tr>
<th>Tuesday</th>
<td>11AM-7PM</td>
</tr>
<tr>
<th>Wednesday</th>
<td>11AM-7PM</td>
</tr>
<tr>
<th>Thursday</th>
<td>11AM-7PM</td>
</tr>
<tr>
<th>Friday</th>
<td>11AM-8PM</td>
</tr>
<tr>
<th>Saturday</th>
<td>11AM-8PM</td>
</tr>
<tr>
<th>Sunday</th>
<td>12PM-8PM</td>
</tr>
<tr>
</tr>
</article>
</section>
</main>
<footer>
<div>
<h2>Contact Info</h2>
<p>phone: 123-456-7890</p>
<p>email: hairdaystyles@domain.com</p>
</div>
<div>
<h2>Our Location</h2>
<p>12345 Some Address St.</p>
<p>Madison, Wisconsin, 98765</p>
</div>
</footer>
And this is what shows up in the inspect element screen:
