Product Landing Page - Build a Product Landing Page

Hi, so I have been trying to move the pricing box models that I have created similar to the product landing page produced by freecodecamp. All the box models have been positions underneath one another but I want them to be next to each other inline just like the example landing page. I am not sure where I am going wrong here so I need a bit of help.
I have tried
.tenor,.bass,.valve{display:inline;}
or {float:right;}
or {margin: right;} but they do not seem to pass
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,intial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"/>
    </head>

    <body> 

      <header id="header">
     <h2 class="h2">Original Trombones</h2>
        <img id="header-img" src="">  
      <nav id="nav-bar">
          <nav class="nav-link"><a href="#features">Features</a></nav>
          <nav class="nav-link"><a href="#video">How It Works</a></nav>
          <nav class="nav-link"><a href="#pricing">Pricing</a></nav>
        </nav> 
        <br> 
        </header> 
       <form id="form" action="https://www.freecodecamp.com/email-submit">
         <input id="email" placeholder="Enter your email address" type="email"name="email"/>
         <input type="submit" id="submit" value="GET STARTED">
         </form>

        
        <div id="features">

<h3>Hand-crafted, home-made, masterpieces</h3>  

<h3>Premium Materials</h3>
          <p>Our Trombones use the shiniest brass which is sourced locally. This will increase the longetivity of your purchase.</p>

          <h3>Fast Shipping</h3>
          <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>

          <h3>Quality Assurance</h3>
          <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
         </div> 
<video id="video" controls>
  
  <source src="https://youtu.be/y8Yv4pnO7qc">

  </video> 
  <section id="pricing">
    <div class="tenor">
      <p>Tenor Trombone</p>
      <p class="price">$600</p>
      <p class="price-info">Lorem ipsum.<br>Lorem ipsum.<br>Lorem ipsum dolor.<br>Lorem ipsum
</p>
<input type="button" value="Select">
    </div>

      <div class="bass">
<p>Bass Trombone</p>
<p class="price">$900</p>
<p class="price-info">Lorem ipsum.<br>Lorem ipsum.<br>Lorem ipsum dolor.<br>Lorem ipsum.</p>
<input type="button" value="Select">
      </div>

      <div class="valve">
        <p>Valve Trombone</p>
        <p class="price">$1200</p>
<p class="price-info">Plays similar to a Trumpet<br>Great for Jazz Bands<br>Lorem ipsum dolor.<br>Lorem ipsum.</p>
<input type="button" value="Select">
      </div>
    </section>
    <section id="copyright">
      <div class="copyright">
      <nav class="nav-link"><p class="privacy">
        Privacy Terms Contact
        </p>
        </nav>      <p class="privacy">Copyright 2016, Original Trombones</p>
      </section>
     </div>   
      </body>
  </html>

/* file: styles.css */
header{
width:100%;
top:0;
left:0;}
.h2{font-size:30px;
font-family:serif;}
.nav-bar{
width:100%;
}
.pricing{display:inline;}
h3{font-family:sans;
font-size:22px;}
.price{font-weight:bold;
font-family:cursive;
font-size:20;
margin-left:20px;}
.tenor,.bass,.valve {border:1px solid;
padding-left:100px;
padding-bottom:45px;
margin:15px;}
.price-info{font-family:sans;
font-size:15px;
text-align:center;
margin-right:100;}
.copyright{border-width:100%;
border:1px hidden; 
background-color:#D3D3D3;
margin:8px} 
.privacy{direction:rtl;
}    

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) 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:

The ‘pricing’ is an id selector, not a class selector. Instead of .pricing, you should use #pricing. Set its display property to ‘flex’. The rest of settings is up to you.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.