Tell us what’s happening:
Hey everyone. Im trying to get my last three divs “product-container” to get put next to each other horizontally. I´ve tried everything. Flexbox, grid, margin, padding, whatnot. Just cant seem to figure it out. In need of help! 
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
<html lang="en">
<head>
<link type="javascript/text" rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Product Landing Page </title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<img id="header-img" alt="logo" src="https://logowik.com/content/uploads/images/guitar-center-new-20223184.jpg">
<ol>
<li><a class="nav-link" href="#Guitars">Guitars</a></li>
<li><a class="nav-link" href="#Quality">Quality</a></li>
<li><a class="nav-link" href="#Get-Started">Get started</a></li>
</ol>
</nav>
</header>
<img id="first-guitar" src="https://images.unsplash.com/photo-1564186763535-ebb21ef5277f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
<section>
<h1 id="Guitars">Guitars</h1>
<br>
<h2>Western Guitar</h2>
<br>
<p class="text">An acoustic-electric guitar is an acoustic guitar fitted with a microphone or a magnetic or piezoelectric pickup. They are used in a variety of music genres where the sound of an acoustic guitar is desired but more volume is required, especially during live performances. The design is distinct from a semi-acoustic guitar, which is an electric guitar with the addition of sound chambers within the guitar body.</p><br>
<h2>Electric Guitar</h2>
<br>
<p class="text">An electric guitar is a guitar that requires external amplification in order to be heard at typical performance volumes, unlike a standard acoustic guitar. It uses one or more pickups to convert the vibration of its strings into electrical signals, which ultimately are reproduced as sound by loudspeakers. The sound is sometimes shaped or electronically altered to achieve different timbres or tonal qualities from that of an acoustic guitar via amplifier settings or knobs on the guitar. Often, this is done through the use of effects such as reverb, distortion and "overdrive"; the latter is considered to be a key element of electric blues guitar music and jazz and rock guitar playing. Designs also exist combining attributes of the electric and acoustic guitars: the semi-acoustic and acoustic-electric guitars.</p><br>
<iframe width="702" height="410" id="video" src="https://www.youtube.com/watch?v=fwJ7knXMLj4"></iframe>
</section>
<section>
<br><h1 id="Quality">Quality of the guitar</h1>
<br>
<p class="text">The quality of guitars is a topic of great importance to musicians and enthusiasts alike. A well-crafted guitar is a work of art, meticulously designed and constructed to produce exceptional sound. The quality of a guitar depends on various factors, including the choice of tonewoods, craftsmanship, and attention to detail.</p>
<img class="pic" src="https://imgs.search.brave.com/Q0aiIJjTkpLnjmkwJIjWZ7MEhNSs_joy9YhlaxPypjs/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/ZnJlZS1waG90by9h/Y291c3RpYy1ndWl0/YXItY2xvc2V1cC13/aXRoLWNvcHktc3Bh/Y2VfMTY5MDE2LTMz/NDYuanBnP3NpemU9/NjI2JmV4dD1qcGc" alt="Guitar Wood">
<p class="text">Tonewoods are the foundation of a great guitar, with woods like spruce, mahogany, and rosewood prized for their unique acoustic properties. The selection and combination of these woods significantly impact the instrument's tone, resonance, and projection.</p>
<img class="pic" src="https://imgs.search.brave.com/O1GTQ2oTn5b68HLObD0B8s9VF6K7RJdnmlrsB85RcDw/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/ZnJlZS1waG90by9j/bG9zZS11cC13aGl0/ZS1ndWl0YXJfMjMt/MjE0Nzc4MTc4Ni5q/cGc_c2l6ZT02MjYm/ZXh0PWpwZw" alt="video of guitar playing">
</section>
<section id="Get-Started">
<form action="https://www.freecodecamp.com/email-submit" id="form">
<br>
<div class="product-container"><h2>Accoustic Guitar</h2><br>
<h3>500$</h3>
<p>Lorem ipsum. Lorem ipsum.Lorem ipsum. Lorem ipsum.Lorem ipsum. Lorem ipsum.Lorem ipsum. Lorem ipsum.</p>
<br>
<input name="radiochoose" type="radio" class="radio-guitars">
</div>
<div class="product-container"><h2>Popcorn Guitar</h2><br>
<h3>700$</h3>
<p>Lorem ipsum. Lorem ipsum.Lorem ipsum. Lorem ipsum.Lorem ipsum. Lorem ipsum.Lorem ipsum. Lorem ipsum.</p>
<br>
<input name="radiochoose" type="radio" class="radio-guitars">
</div>
<div class="product-container"><h2>Electric Guitar</h2><br>
<h3>200$</h3>
<p>Lorem ipsum. Lorem ipsum.Lorem ipsum. Lorem ipsum.Lorem ipsum. Lorem ipsum.Lorem ipsum. Lorem ipsum.</p>
<br>
<input name="radiochoose" type="radio" class="radio-guitars">
</div>
</div>
<input name="email" type="email" id="email" placeholder="E-Mail"></input>
<br>
<input type="submit" id="submit" value="Submit">
</form>
</section>
</body>
</html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
font-family: "Arial", sans-serif;
line-height: 1.6;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
#first-guitar {
height: 0;
width: 0;
}
}
#first-guitar {
width: 100%;
height: auto;
margin-bottom: 30px;
}
#nav-bar {
position: fixed;
top: 0;
width: 100%;
}
#nav-bar ol {
display: flex;
justify-content: flex-end;
background-color: white;
gap: 30px;
overflow: hidden;
padding: 20px 0px;
list-style-type: none;
border-left: 0
}
#nav-bar a {
color: rgb(6, 6, 6);
text-decoration: none;
font-size: 20px;
margin-right: 40px
}
#nav-bar a:hover {
color: rgb(217, 42, 42)
}
#header-img {
background-size: cover;
height: 72px;
width: 160px;
position: absolute;
left: 20px;
}
.text {
width: 600px;
margin: 20px auto;
text-align: justify;
}
html {
text-align: center;
background-color: rgba(229, 229, 229, 0.813);
}
h1 {
font-size: 2rem
}
h1:before-child {
margin: 20px;
}
h2 {
font-size: 1.5rem;
}
.product-container {
border: 2px solid grey;
border-radius: 6px;
width: 270px;
height: 300px;
}
.product-container h2 {
background-color: rgb(180, 83, 83);
border-radius: 5px 5px 0 0;
}
.product-container h2 {
color: rgb(239, 233, 233);
}
.product-container {
margin:
}
input, button {
border: none;
outline: none;
}
input[type="email"] {
width: 40%;
max-width: 360px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
background-color: #f0f0f0;
margin: 40px 0;
color: #444;
}
#product-container-wrapper {
background-color: black;
}
#submit {
background-color: #444;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.2s ease-out;
}
#submit:hover {
background-color: grey;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page