I'm a beginner in HTML and CSS and I'm trying to create a simple webpage layout from scratch.
I want all the elements of the page (nav, header, section, footer, etc.) to be centered while still keeping the nav bar on the left side. I've set up the basic structure of the page, but I can't seem to figure out how to center it. Currently, I'm using float:left which I assume is causing the issue, but I'm not sure how else to arrange the layout.
Here's the code snippet:
header {
text-align: center;
width: 960px;
}
nav {
line-height: 30px;
float: left;
padding: 5px;
height: 100px;
width: 200px;
}
section {
float: left;
padding: 5px;
width: 800px;
}
footer {
background-color: gray;
text-align: center;
padding: 5px;
width: 960px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Test HTML Page>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Heading</h1>
</header>
<nav>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<section>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec est nunc, iaculis in mauris vitae, commodo ullamcorper lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere in libero id dictum. Phasellus viverra rutrum mollis.</p>
</section>
<footer>
Copyright 2016
</footer>
</body>
</html>I appreciate any help! Thank you!