I attempted to align the company name and navigation links on the same line by using float: left
for the h1
element and float: right
for the nav, but I keep encountering issues with them appearing above or below each other. My goal is to create a website header where the company name sits alongside the navigation bar. Any suggestions or advice on how to achieve this? Below is an excerpt from my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Virginia Delights</title>
<meta charset="utf-8">
<link href="Delights.css" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="mission.html">Mission</a>
<a href="staff.html">Staff</a>
<a href="donate.html">Donate</a>
<a href="contact.html">Contact</a>
</nav>
<h1>Virginia Delights</h1>
</header>
<img class="rounding" src="Virginia Delights Logo.jpg" alt="Logo" height="200" width="200">
<footer>
Copyright © 2020 Virginia Delight
</footer>
</div>
</body>
</html>
nav { text-align:right;
float: right;
margin: 0;
font-size:1.3em;
text-shadow:3px 3px 3px gray;}
header {width: 100%;}
nav a {text-decoration: none;
color: white;
}
h1 {float: left;
height: 100px;
width: 700px;
font-size: 2em;
padding-left:150px;
padding-right:150px;
border-radius:20px;
padding-top:0.5px;
margin-left:auto;
margin-right:auto;
text-shadow:3px 3px 3px gray;
color:white;}