My design conundrum lies within a flexbox structure where I desire specific elements to have varying amounts of spacing, prompting me to experiment with margins.
At the top of my box, there is a header that requires some distance between itself and the surrounding elements.
To achieve this, I aim to group together my p elements while ensuring they are positioned further away from the heading.
Despite my attempts to adjust the margin-bottom, no visible changes occur regardless of whether I increase or decrease the margin's value.
I initially used percentages for measurements but opting for pixel values did not resolve the issue.
Although the layout appears satisfactory in the snippet view, the real problem arises when viewing on larger screens where minimal space exists between the header and the p elements.
.container {
display: flex;
position: relative;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
min-height: 70vh;
width: 70%;
margin: 5% auto 8% auto;
background-color: white;
}
.container p {
margin-bottom: 2%;
}
.container h2 {
color: orange;
font-size: 34px;
}
.middle p:first-child {
margin-top: 8%;
}
.bspace {
margin-bottom: 50px;
}
.box h2 {
color: orange;
text-align: center;
}
.left {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
order: 1;
width: 30%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
width: 45%;
height: 100%;
}<div class="container">
<div class="left">
<img src="home.jpg" alt="Picture of kid">
<img src="catering.jpg" alt="Picture of kid">
</div>
<div class="middle">
<h2 class="bspace"> Some Text </h2>
<p>Sample</p>
<p>Sample</p>
<p>Sample</p>
<p>Sample</p>
</div>
</div>