Why can't I style footer only

1

I’m building a project (not a FCC project) and I want to style only footer section.
The problem is that it is styling footer as well as the section above footer too.

I’m pasting code of both the sections along with the image of output.

HTML

<section id="boxes">
		<div class="container">	
			<div class="box">
				<img src="./img/logo_html.png">
				<h1>HTML5 Markup</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua.</p>
			</div>
			<div class="box">
				<img src="./img/logo_css.png">
				<h1>CSS3 Styling</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua.</p>
			</div>
			<div class="box">
				<img src="./img/logo_brush.png">
				<h1>Graphic Design</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua.</p>
			</div>
	</section>

	<section id="footer">
		<footer>
			Shikhar Web Dev, Copyright &copy 2020;
		</footer>
	</section>

CSS

#footer{
	padding: 20px;
	color: #ffffff;
	background: #e8491d;
	text-align: center;
	margin-top: 20px;
}

OUTPUT

Problem
Problem1366×275 25.6 KB

2

You should remove the section for footer and use the css directly for the **footer ** tag.

3

We really need to see the full code, preferably a live version on something like Codepen.

4

@ShAfi
Hi
Just tried that. It’s not working.

5

@lasjorg
Here you go buddy!
https://codepen.io/Shikhar007/pen/wvaLJdd?editors=1100
(ignore the images not loading)

6

You have clear the footer because you are floating the boxes.

#footer {
  clear: left;
}

I wouldn’t suggest using float for layout, but if you are going to use it you should learn a bit about some of the issues you will face when doing layout.

7