I am trying to align the battery icon with the heading and text of “quality Assurance”
<head>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<div id="page-wrapper">
<header id="header"> <div class="logo"><img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombone image"/></div><nav id="nav-bar">
<ul>
<li>
<a href="#features" class="nav-link" id="Tenor_Trombone"></a>
</li>
<li>
<a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
</li>
<li>
<a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
</li>
</ul>
<div class="container"></div>
<section id="hero">
<h2 id="heading1">Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter your email address" type="email" name="email"/>
<input id="submit" type="submit" value="GET STARTED" class="btn"/>
</form>
</section>
<div class="container">
<section id="premium-materials">
<div class="icon">
<i class="fa fa-3x fa-fire"></i></div>
<div class="desc">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</section>
<section id="fast-shipping">
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<h2>Fast Shipping</h2>
<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>
</section>
<section id="quality-assurance">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
<h2>Quality Assurance</h2>
<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>
</section>
<iframe id="video"></iframe>
</div>
</nav>
</div></header>
/* file: index.html */
<head>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<div id="page-wrapper">
<header id="header"> <div class="logo"><img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombone image"/></div><nav id="nav-bar">
<ul>
<li>
<a href="#features" class="nav-link" id="Tenor_Trombone"></a>
</li>
<li>
<a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
</li>
<li>
<a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
</li>
</ul>
<div class="container"></div>
<section id="hero">
<h2 id="heading1">Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter your email address" type="email" name="email"/>
<input id="submit" type="submit" value="GET STARTED" class="btn"/>
</form>
</section>
<div class="container">
<section id="premium-materials">
<div class="icon">
<i class="fa fa-3x fa-fire"></i></div>
<div class="desc">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</section>
<section id="fast-shipping">
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<h2>Fast Shipping</h2>
<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>
</section>
<section id="quality-assurance">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
<h2>Quality Assurance</h2>
<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>
</section>
<iframe id="video"></iframe>
</div>
</nav>
</div></header>
I’m a little confused why the nav element is used the way it is as a container for almost everything. I would expect that to be closed after the ul before the page sections.
You also have an empty container element before the hero section.
ok i think i have fixed the error but the icon still didn’t align with the text.
<head>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<div id="page-wrapper">
<header id="header"> <div class="logo"><img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombone image"/></div><nav id="nav-bar">
<ul>
<li>
<a href="#features" class="nav-link" id="Tenor_Trombone"></a>
</li>
<li>
<a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
</li>
<li>
<a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
</li>
</ul>
<div class="container"></div>
<section id="hero">
<h2 id="heading1">Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter your email address" type="email" name="email"/>
<input id="submit" type="submit" value="GET STARTED" class="btn"/>
</form>
</section>
<div class="container">
<section id="premium-materials">
<div class="icon">
<i class="fa fa-3x fa-fire"></i></div>
<div class="desc">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</section>
<section id="fast-shipping">
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<h2>Fast Shipping</h2>
<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>
</section>
<section id="quality-assurance">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
<h2>Quality Assurance</h2>
<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.
</div>
</p>
</section>
<iframe id="video"></iframe>
</div>
</nav>
</div></header>
You need to close the div in the same place as you do with the other ones.
Also, for the first one, you have a desc container for the h2 and p elements which you do not have for the other two.
If this is how the first one looks:
<section id="premium-materials">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</section>
The rest should look the same.
I would strongly advise you to format the code better. Without proper formatting, it’s much harder to read and you are much more likely to start making mistakes.
I would suggest using an editor that can help you format the document. You can transfer it back to the fCC editor when you are done.
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</section>
<section id="fast-shipping">
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<div id="desc">
<h2>Fast Shipping</h2>
<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.
Quality Assurance
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.
<head>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css"/>
</head>
<div id="page-wrapper">
<header id="header"> <div class="logo"><img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombone image"/></div><nav id="nav-bar">
<ul>
<li>
<a href="#features" class="nav-link" id="Tenor_Trombone"></a>
</li>
<li>
<a href="#how_it_works" class="nav-link" id="Bass_Trombone"></a>
</li>
<li>
<a href="#pricing" class="nav-link" id="Valve_Trombone"></a>
</li>
</ul>
<div class="container"></div>
<section id="hero">
<h2 id="heading1">Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter your email address" type="email" name="email"/>
<input id="submit" type="submit" value="GET STARTED" class="btn"/>
</form>
</section>
<div class="container">
<section id="premium-materials">
<div class="icon">
<i class="fa fa-3x fa-fire"></i></div>
<div class="desc">
<h2>Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</section>
<section id="fast-shipping">
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<div id="desc">
<h2>Fast Shipping</h2>
<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>
</div>
</section>
<section id="quality-assurance">
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<h2>Quality Assurance</h2>
<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.
</div>
</p>
</section>
<iframe id="video"></iframe>
</div>
</nav>
</div></header>