[Hi everyone I have been trying to figure out how to align my code for fews days now. I would like my html after my header to be between my logo and links. The goal is not to use padding as after a certain screen size I would like to keep the same layout.
I tried using justify content space-around in my flex class but it won’t line up. I tried giving the div in my flex class a width and played around with other values but it didn’t solve. I appreciate any help given, thank you in advance.
body {
padding: 0;
margin: 0;
}
.section-one {
background-color: blue;
color: white;
padding: 50px 0;
}
.header {
display: flex;
justify-content: space-around;
padding: 0 0 50px 0;
}
ul {
display: flex;
gap: 1rem;
margin: 0;
list-style: none;
}
.flex {
display: flex;
gap: 20px;
}
.column,
.placeholder-image {
flex: 1;
flex-direction: column;
border: 5px solid;
}<section class="section-one">
<div class="header">
<div class="logo left">LOGO</div>
<div class="right">
<ul>
<li>
<a href=""></a>link one</li>
<li>
<a href=""></a>link two</li>
<li>
<a href=""></a>link three</li>
</ul>
</div>
</div>
<div class="flex">
<div class="column">
<div>
<h1>This website is awesome</h1>
</div>
<div>
<p class="quote">Lorem ipsum, dolor sit amet elit. Laboriosam, eum blanditiis porro ad animi aliquam, quisquam dolore nisi eaque sit explicabo laborum voluptatibus.</p>
</div>
<div><button class="sign-up">sign up</button></div>
</div>
<div class="placeholder-image">This is a place holder for an image
</div>
</div>
</section>4
Here is a simple approach using some padding. I also changed the space-around to space-between in order to have the header’s elements at the edges
header {
justify-content: space-between;
margin-bottom: 1rem;
}
header,
main {
padding-inline: 2rem;
display: flex;
}
ul {
list-style: none;
display: flex;
gap: 10px;
}
main {
gap: 10px;
}
.image {
width: 30px;
height: 30px;
background: pink;
}
.left, .right {
flex-basis: 50%;
outline: 1px solid blue;
}<header>
<div class="image"></div>
<ul class="links">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</header>
<main>
<div class="left">
<h1>This website is awesome</h1>
<p class="quote">Lorem ipsum, dolor sit amet elit. Laboriosam, eum blanditiis porro ad animi aliquam, quisquam dolore nisi eaque sit explicabo laborum voluptatibus.
</p>
<button class="sign-up">sign up</button>
</div>
<div class="right">
This is a place holder for an image
</div>
</mainEdit: you have a lot of useless divs in your left column
1