Trying my hand at practicing HTML by creating a small webpage, but struggling with why the Footer is aligning itself under the Header instead of the container I set up.
It seems like a small detail that I might have missed, but I've hit a wall and can't find a solution anywhere. Any guidance here would be immensely helpful.
header {
height: 50px;
width: 900px;
color: white;
margin: auto;
padding: auto;
background-color: black;
display: block;
}
nav {
float: right;
background-color: black;
}
p,
h1,
h2,
li {
font-family: sans-serif;
}
footer {
height: 50px;
width: 900px;
color: white;
margin: auto;
background-color: black;
text-align: center;
padding: auto;
display: block;
}
main {
padding: auto;
display: block;
}
#container {
display: block;
padding-bottom: 50px;
margin: auto;
width: 900px;
}
#left-column {
display: inline-block;
width: 450px;
float: left;
}
#right-column {
display: inline-block;
float: right;
}
#button {
border-radius: 5px;
background-color: red;
text-align: center;
color: white;
height: 50px;
width: 80px;
}<div id="container">
<header>
<p>Logo</p>
<nav></nav>
</header>
<main>
<div id="left-column">
<h1>Website title</h1>
<h2>Article title</h2>
<p>Some text followed by a list:</p>
<ul>
<li>A list item</li>
<li>A list item with a link (<a href="#">Click me</a>)</li>
<li>New deals daily</li>
</ul>
<p> Some more text</p>
</div>
<div id="right-column">
<h2>Some content related to the article</h2>
<div id="button">
<p>A Button</p>
</div>
</div>
</main>
<footer>
<p>©Website name 2017</p>
</footer>
</div>