Product Landing Page - Build a Product Landing Page

HTML-CSS
1

I corrected my previous HTML code and verified that there were no more issues present that I could see and a verifier could find but for some reason I’m still not able to style my nav bar I have attempted to select it via class selection and CSS but no matter how I try to style it it doesn’t actually take I’m sure it’s probably something simple I’m overlooking but I’m hoping that someone can help explain why the styling is not working with the nav bar I have also tried to select by the ID but that also is not working during my attempts I tried to do hovering colors borders at a border radius and so on. Can someone please help or explain what I am missing?

On a side note i did remove the second body in my stylesheet and moved the font family to the correct place.

Your code so far

<!-- file: index.html -->


<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel='stylesheet' href='styles.css'>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
  </head>
  <header id="header">

<nav id="nav-bar">
        <a id="Audiobooks" class="nav-link" href="#Audiobooks">Audiobooks</a>
       
        <a id="Platforms" class="nav-link" href="#Platforms">Platforms</a>
        
        <a id="Compatibility" class="nav-link" href="#Compatibility">Compatibility</a>
      </nav>

              <img src="https://img.freepik.com/premium-vector/audiobook-logo-template-literature-ebooks-audio-format_349999-1240.jpg" width="100" height="75" alt="audiobooks" id="header-img">
</header>
              <section id="#Audiobooks">
        <h2>What is an audiobook?</h2>
          <p>An audiobook is a book read by another person and listened to on any supported audio device. Examples include: Cell Phones, Tablets, Computers and Other Smart Devices</p>
        <h4>Is listening to an audiobook the same as reading?</h4>
          <p>This is a common question with many different opinions however Matthew Traxler (University Of California) states that our mental machinery processes audiobook information the same as if we were reading from a book. It is true that listening to an audiobook uses more auditory processing than that of visual processing but the results are the same according to a study by Beth Rogowsk (Bloomsburg University).</p>
        </section>
        <section id="#Platforms">
          <h2>Audiobook Platforms</h2>
          <p>As mentioned previously, there are plenty of devices that support audiobook and mobile applications out there that make accessability a breeze for users.</p>
          <p>The most common applications include Amazon's Audible, Nook Audiobooks, and websites like audiobooks.com. It should be noted that some audiobook services do have a subscription fee. For example audible charges for credits (1-3) but there can also be a montly subscription fee of $14.95 for 1 credit a month.</p>
          <iframe width="475" height="325" src="https://www.youtube.com/embed/T7xuRvN9PoM" id="video"></iframe>
        </section>

      <section id="#Compatibility">
        <h2>History and Compatibility</h2>
          <p>In 1932 the first form of audiobooks were made called "talking-books" which were used to help the blind. As technology has continued to advance we have moved on from audio records and proceeded into the digital age.</p>
          <p>Whether your on the go or on your computer, there is a way to listen to audiobooks. Android and Apple devices have applications as mentioned in the platform section that allow people to listen to audiobooks. Other websites such as Youtube and Tokybooks also have audiobook for listening pleasure. Music streaming applications such as spotify are now sharing audiobooks as well as podcast.</p>
        </section>

        <h3>Newsletter Sign Up</h3>
        <p>Please feel free to sign up for our weekly newsletter by submitting an email below</p>
        
<form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Shoot Us An Email">
        <input id="submit" type="submit" value="Submit">
      </form>
</html>

/* file: styles.css */
body {
  background-image: linear-gradient(to right, rgba(255,153,192,1), rgba(0,204,204,1));
}

@media (max-width:500px){
    body{
        width: 400px;  
    }

header {
  position: fixed;
  top:0px;
  display: flex;
flex-direction: row;
flex-wrap: none;
width: 100%;
left: 0;
}

body {
  font-family: Arial, Helvetica;  
}

.nav-link {

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge: