My website is in progress. The navigation bars and header are looking good, but I'm struggling with the alignment of the body text. How can I make my paragraphs float to the right of the navigation bar rather than being stuck below it? What CSS code should I use to achieve this?
This is what I have so far: https://i.sstatic.net/FmroX.png. I want the content following that to be positioned next to the navigation bar like this: https://i.sstatic.net/HvVqO.png.
<!DOCTYPE html>
<html>
<head>
<!-- Author: Abdullahi Jama 0003 -->
<title>Cycling Tours</title>
<link rel="stylesheet" type="text/css" media="print" href="printstyles.css" >
<link rel="stylesheet" type="text/css" href="aboutus.css" >
</head>
<body>
<header>
<a href="about_us.html"><img src="images/bicycle_axle_sm.jpg" alt="This is a picture of an axle"></a>
<h1>Cycling Tours</h1>
</header>
<div class="navmenu">
<nav>
<ul>
<li><a href="aboutus.html">About Us</a></li>
<hr>
<li><a href="#">Ask Us</a></li>
<hr>
<li><a href="#">Destinations</a></li>
<hr>
<li><a href="#">FAQ</a></li>
<hr>
<li><a href="#">Reviews</a></li>
<hr>
<li><a href="#">Seminars</a></li>
<hr>
<li><a href="#">Trip Prep</a></li>
<hr>
</ul>
</nav>
</div>
<div class="paragraph">
<h2>About Us</h2>
<p>Cycling Tours began when Bill Randolf and three of his friends from high school started cycling regularly every weekend.
Their routine cycling turned into frequent trips which gained popularity. Soon other friends and family members wanted to join them on these trips.</p>
<div id="dust_jpeg">
<img id="dustimage" src="images/dust.jpg" alt="Picture of Dust">
</div>
<p>Our cyclists are passionate, health-conscious, and environmentally friendly. As such, all our trips offer vegan meal options, recycled paper utensils,
and hybrid vehicle support for the riders.</p>
<p>Our tours cater to solo adventurers, couples, groups of friends, and families. For off-road cycling expeditions, we provide camping facilities while shared accommodations are available for couples, friends, or families. If you're traveling alone, we can pair you up for shared lodging.
You also have the option to pay a single-supplement if you prefer your own room.</p>
<p>Once you've experienced one of our tours, chances are you'll want to embark on more adventures with us. Over 80% of our customers have gone on multiple trips with us.
We are always open to new trip ideas, so feel free to share your suggestions!</p>
</div>
<p id="bicycleimage"><img src="images/bicycles_sm.jpg" alt="Image of bicycles."><p>
<hr>
<p id="bottom_footer"><strong>Cycling Tours * P.O. Box 4455 * Brantford, ON * NET 2J0</strong><p>
</body>
</html>
<style type ="text/css">
header h1 {
display: inline;
font-size: 45px;
font-family: arial;
vertical-align: 90%;
margin: 30px;
}
header {
background-color: #bbccdd;
padding-bottom: 0px;
height: 121px;
}
.navmenu{
background-color: #bbccdd;
width: 8.8%;
height: 580px;
display:inline-block;
}
.navmenu hr {
border: 1px solid grey;
}
.navmenu ul {
margin-top: 0;
padding-left: 2px;
display:inline-block;
}
.navmenu li {
height: 35px;
padding-top: 30px;
padding-left: 10px;
font-family: arial;
color: grey;
display:inline-block;
}
.navmenu li a {
color: #888888;
text-decoration: none;
font-weight: bold;
}
.navmenu a:link {
color: #888888;
}
.paragraph {
width: 60%;
margin-left: 10%;
border-top: 0;
float: left;
}
</style>