EDIT: Leaving this here in case someone else runs into the same problem but I figured it out, a little embarrassing. I'm working off template files provided by my HTML course, and you're supposed to copy them to a new separate folder in order to make the appropriate changes. I was making the proper edits to my CSS sheet, but was attempting to test said edits using the HTML file they provided (instead of the one I copied to a separate folder), which was in the wrong folder and thus not reflecting any changes I made. No wonder nothing I was doing was making a difference! I realized this and when I tried to test it using the correct HTML file, it finally worked. Turns out the code was fine, I was just being dumb and opening the wrong file. Oh well, we all start somewhere. Thank you to everyone who helped me!
I'm attempting to create a simple two column layout but I'm running into some trouble. No matter what I try, I cannot get the navigation bar to float to the left, instead it just appears above the main body. I'll provide my CSS and one of my HTML files for reference.
Sorry in advance for what I can only assume is probably messy code, still in the process of learning.
My CSS
* {
box-sizing: border-box;
}
body { background-color: #B8DBED;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper { margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #90C7E3;
min-width: 960px;
max-width: 2048px;
box-shadow: 3px 3px 3px #333333;
background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
border-width: 1px;
border-color: #000033
}
header { background-color: #000033;
color: #FFFFFF;
height: 120px;
text-align: center;
padding-top: 30px;
padding-left: 3em;
}
nav { float: left;
width: 160px;
font-weight: bold;
padding: 1.5em;
font-size: 120%;
}
nav a { text-decoration: none; }
nav a:link{color: #5C7FA3; }
nav a:visited {color: #344873; }
nav a:hover {color: #A52A2A; }
main { padding: 1px 20px 20px 30px;
display: block;
background-color: #FFFFFF;
margin-left: 190px;
}
#homehero { height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 190px;
}
#yurthero { height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 190px;
}
#trailhero { height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 190px;
}
h1 { margin-bottom: 0;
margin-top: 0;
font-family: Georgia, 'Times New Roman', serif;
font-size: 3em;
letter-spacing: 0.25em;
}
h2 { color: #3399CC;
font-family: Georgia, 'Times New Roman', serif;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 { color: #000033;
font-family: Georgia, 'Times New Roman', serif; }
main ul { list-style-image: url(marker.gif);
font-size: 1.2em;
}
footer { font-size: 75%;
font-style: italic;
text-align: center;
font-family: Georgia, 'Times New Roman', serif;
padding: 20px;
margin-left: 190px;
background-color: #FFFFFF;
}
dt { color: #000033; }
.resort { color: #5C7FA3;
font-weight: bold;
}
#contact { font-size: 90%; }
One of my HTML files:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<meta charset="utf-8">
<link href="pacific.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="yurts.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>
</nav>
<div id="homehero"></div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
<div id="contact">
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br><br>
888-555-5555<br><br>
</div>
</main>
<footer>
Copyright © 2018 Pacific Trails Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>
</body>
</html>
Any help would be appreciated, thank you!