Hello there, I am hoping someone can help me or shed some light on what I’m doing wrong here. Any and all help is greatly appreciated.
When I add a ‘margin-top’ to #get-started, both the fixed header and the #get-started section move down but I only want the #get-started section to do so. I can’t see why it is doing this… (probably something stupid i know!).
This is still a work in progress but any other comments upon any mistakes in my code are very welcome!
Thanks
HTML
<div id="page">
<header id="header">
<h1 id="title">MR Running Poles</h1>
<img id="header-img" src="https://st3.depositphotos.com/4430281/15783/v/600/depositphotos_157833884-stock-illustration-girl-runner-skyrunner.jpg" alt="MR Running Poles Logo">
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how-it-works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="container"></div>
<section id="get-started">
<h2>Handcrafted, durable and mountain ready</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
type="email"
name="email"
id="email"
placeholder="Enter your e-mail address"
required
/>
<input
type="submit"
class="btn"
id="submit"
value="Get Started"
/>
</form>
</section>
<div class="container">
<section id="features">
<div class="grid">
<h2>Premium Materials</h2>
<p>Our running poles are made of the highest quality materials.
</div class="grid">
<h2>Fast Shipping</h2>
<p>Fast next day delivery available. We also provide free returns as standard.</p>
</div>
<div class="grid">
<h2>Quality Assurance</h2>
<p>All of our poles go through a rigourous inspection to ensure reliabilty.</p>
</div>
</section>
</div>
<section id="how-it-works">
<iframe
id="video"
width="950"
height="534" src="https://www.youtube.com/embed/TVUbiXCuVsA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="pricing">
<div class="product" id="steel">
<h3>Steel</h3>
<p>50 gbp</p>
<ol>
<li>Shaft Material: Steel</li>
<li>Handle Material: Rubber</li>
<li>Weight (Pair): 620 g</li>
</ol>
</div>
<div class="product" id="aluminium">
<h3>Aluminium</h3>
<p>90 gbp</p>
<ol>
<li>Shaft Material: Aluminium</li>
<li>Handle Material: Foam</li>
<li>Weight (Pair): 420 g</li>
</ol>
</div>
<div class="product" id="carbon-fibre">
<h3>Carbon Fiber</h3>
<p>140 gbp</p>
<ol>
<li>Shaft Material: Carbon Fiber</li>
<li>Handle Material: Cork</li>
<li>Weight (Pair): 315 g</li>
</ol>
</div>
</section>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#page {
position: relative;
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
/* min-height: 100px; */
padding: 0 40px;
}
@media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
#header-img {
width: 40px;
}
.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
#get-started {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 100px;
}
nav ul {
list-style-type: none;
display: flex;
flex-direction: row;
justify-content: space-around;
width: 400px;
}
#pricing {
display: flex;
justify-content: space-around;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
}
ol {
list-style-type: none;
}