I'm currently working on a web page design and I'm facing an issue with trying to align a clip-art image and its description in a row using flex. Despite using justify-content to adjust the spacing, there seems to be a persistent gap between the two elements. To make this clearer, I've used color coding in the layout.
View the problematic section here
body {
background-color: rgb(220, 220, 220);
}
nav {
display: inline;
text-align: right;
}
nav > * {
margin: 0px 20px 0px 0px;
font-family: serif;
text-decoration: none;
color: black;
}
img {
width: 25%;
height: auto;
display: inline;
text-align: left;
margin: 0px 600px 0px 0px;
}
header {
display: block;
margin: 0px 0px 0px 0px;
width: 100%;
}
div {
display: block;
width: 70%;
margin: 0px 200px 0px 200px;
text-align: center;
}
#email {
background-color: white;
border: black solid;
width: 300px;
height: 25px;
margin: 0px 0px 10px 0px;
}
#submit {
width: 200px;
height: 25px;
display: block;
margin: auto;
border: solid black;
background-color: yellow;
}
#features {
display: block;
}
#clip {
width: 100px;
height: 100px;
}
section {
display: flex;
flex-direction: row;
margin: 50px 100px 50px 100px;
background-color: yellow;
}
article {
display: flex;
flex-direction: column;
background-color: pink;
}
article > * {
margin: 0px 0px 0px 0px;
} <body>
<header>
<img src="https://cdn.freecodecamp.org/testable-projects- fcc/images/product-landing-page-logo.png" alt="original trombones">
<nav>
<a href="">Features</a>
<a href="">How it works</a>
<a href="">Pricing</a>
</nav>
</header>
<div>
<h1 style="text-align: center;">Hand-crafted, home-made masterpieces</h1>
<form id="form">
<label for="email"></label>
<input type="email" id="email" placeholder="Enter your email" required>
<button type="submit" form="form" target="_blank"id="submit"><strong>Let's get started!</strong></button></form>
</div>
<div2 id="features">
<section>
<img id="clip" src="https://shop.digitemb.com/wp-content/uploads/2019/06/V-20793-Elegant-Prince-Crown-Silhouette-Vector-Art.jpg">
<article>
<h3>Premium Materials</h3>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</article>
</section>
<section>
<img id="clip" src="https://www.clipartkey.com/mpngs/m/85-853916_fast-delivery-icon-png.png">
<article>
<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>
</article>
</section>
<section>
<img id="clip" src="https://us.123rf.com/450wm/iulika1/iulika11810/iulika1181000043/126717986-project-management-icon-vector-illustration.jpg?ver=6">
<article>
<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>
</article>
</section>
</div2>
</body>This code snippet showcases my attempt at getting the items within 'section' in the '#features' element to be closely aligned.