please make my navigation bar with home, camping equipment etc..... to be on the right side rather than left. also DO NOT make the navigation bar under the name of the title of the website but rather aligned and to the left


html:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style/style.css" />
   <title>Retail Camping Company</title>
</head>
<body>
   <header>
      <h1>Retail Camping Company</h1>
      <nav>
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="camping-equipment.html">Camping Equipment</a></li>
            <li><a href="furniture.html">Furniture</a></li>
            <li><a href="reviews.html">Reviews</a></li>
            <li><a href="basket.html">Basket</a></li>
            <li><a href="offers-and-packages.html">Offers and Packages</a></li>
         </ul>
      </nav>
   </header>
   <!-- Home Page -->
   <main>
      <section>
         <!-- Insert slide show here -->
         <div class="slideshow-container">
            <div class="mySlides">
               <img src="https://via.placeholder.com/600x400" alt="Tents" style="width:100%">
            </div>
            <div class="mySlides">
               <img src="https://via.placeholder.com/600x400" alt="Cookers" style="width:100%">
            </div>
            <div class="mySlides">
               <img src="https://via.placeholder.com/600x400" alt="Camping Gear" style="width:100%">
            </div>
         </div>
      </section>
      <section>
         <!-- Display special offers and relevant images -->
         <div class="special-offers-container">
            <div class="special-offer">
               <img src="https://via.placeholder.com/200x200" alt="Tent Offer">
               <p>20% off premium tents!</p>
            </div>
            <div class="special-offer">
               <img src="https://via.placeholder.com/200x200" alt="Cooker Offer">
               <p>Buy a cooker, get a free utensil set!</p>
            </div>
            <div class="special-offer">
               <img src="https://via.placeholder.com/200x200" alt="Furniture Offer">
               <p>Save on camping furniture bundles!</p>
            </div>
         </div>
      </section>
      <section>
         <!-- Modal pop-up window content here -->
         <button id="modalBtn">Special Offer!</button>
         <div id="modal" class="modal">
            <div class="modal-content">
               <span class="close">×</span>
               <p>Sign up now and receive 10% off your first purchase!</p>
            </div>
         </div>
      </section>
   </main>
   <footer>
      <p>Follow us on social media:</p>
      <ul>
         <li><a href="https://www.facebook.com">Facebook</a></li>
         <li><a href="https://www.instagram.com">Instagram</a></li>
         <li><a href="https://www.twitter.com">Twitter</a></li>
      </ul>
   </footer>
   <script>
      // Get modal element
      var modal = document.getElementById('modal');
      // Get open model button
      var modalBtn = document.getElementById('modalBtn');
      // Get close button
      var closeBtn = document.getElementsByClassName('close')[0];
         // Listen for open click
         modalBtn.addEventListener('click', openModal);
         // Listen for close click
         closeBtn.addEventListener('click', closeModal);
         // Listen for outside click
         window.addEventListener('click', outsideClick);
         
         // Function to open modal
         function openModal() {
         modal.style.display = 'block';
         }
         
         // Function to close modal
         function closeModal() {
         modal.style.display = 'none';
         }
         
         // Function to close modal if outside click
         function outsideClick(e) {
         if (e.target == modal) {
         modal.style.display = 'none';
         }
         }
      </script>
   </body>
</html>

CSS:
html, body, h1, h2, h3, h4, p, a, ul, li, div, main, header, section, footer, img {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  background: #f1f1f1;
  color: #333;
  width: 100%;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  flex-direction: column;
  display: flex;
}

header {
  background: #32612D;
  padding: 0.5rem 2rem;
}
main{
  flex-grow: 1; 
}
h1 {
color: #fff;
display: inline;
}



nav ul {
display: inline;
list-style: none;
displa
}

nav ul li {
display: inline;
margin-left: 1rem;
}

nav ul li a {
text-decoration: none;
color: #fff;
}

nav ul li a:hover {
color: #b3b3b3;
}

.slideshow-container {
width: 100%;
position: relative;
margin: 1rem 0;
}

.mySlides {
display: none;
}

.mySlides img {
width: 100%;
height: auto;
}

.special-offers-container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
margin: 1rem 0;
}

.special-offer {
width: 200px;
padding: 1rem;
text-align: center;
margin: 1rem;
background-color: #ADC3AB;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.special-offer:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}

.special-offer img {
width: 100%;
height: auto;
margin-bottom: 0.5rem;
border-radius: 5px;
}

.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
overflow: auto;
}

.modal-content {
background-color: #fefefe;
padding: 2rem;
margin: 10% auto;
width: 30%;
min-width: 300px;
max-width: 80%;
text-align: center;
border-radius: 5px;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

.close {
display: block;
text-align: right;
font-size: 2rem;
color: #333;
cursor: pointer;
}

footer {
  position: relative;
  bottom: 0px;
  background: #32612D;
  padding: 1rem;
  text-align: center;
  margin-top: auto;
}

footer p {
color: #fff;
margin-bottom: 1rem;
}

footer ul {
list-style: none;
}

footer ul li {
display: inline;
margin: 0.5rem;
}

footer ul li a {
text-decoration: none;
color: #fff;
}

@media screen and (max-width: 768px) {
.special-offers-container {
flex-direction: column;
}
}

@media screen and (max-width: 480px) {
header {
text-align: center;
}

h1 {
display: block;
margin-bottom: 1rem;
}
}

.catalog {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 2rem 0;
}

.catalog-item {
width: 200px;
padding: 1rem;
margin: 1rem;
background-color: #ADC3AB;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.catalog-item:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.catalog-item img {
width: 100%;
height: auto;
margin-bottom: 0.5rem;
border-radius: 5px;
}

.catalog-item h3 {
margin-bottom: 0.5rem;
}

.catalog-item p {
margin-bottom: 0.5rem;
}

.catalog-item button {
background-color: #32612D;
color: #fff;
padding: 0.5rem;
border: none;
border-radius: 5px;
cursor: pointer;
}

.catalog-item button:hover {
background-color: #ADC3AB;
}