I am having trouble with creating a webpage. I have designed a website but I am struggling to get it right. I have included my HTML and CSS code below.
What I am trying to achieve is a header at the top, followed by several sections containing a photo on the left and a paragraph on the right, alternating between the two layouts. However, I am facing issues with the first block of information. In my CSS, I have defined the structure of my content, including headers and div elements for photos and paragraphs, but I can't seem to display them inline-block. Where am I going wrong? I have also posted an image of my current progress.
.container {
margin: auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
<section class="why-we-help">
<div class="container">
<div class="row">
<div class="home">
<div class="info">
<h1>Dlaczego chcemy pomóc?</h1>
</div>
<div class="content">
<img class="img" src="images/2.jpg" alt="najwazniejsza jest miłość">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quisquam id deserunt,
enim
temporibus autem itaque exercitationem, maiores facere magni minima iure rem facilis
adipisci
porro debitis, quam ad obcaecati.</p>
</div>
</div>
</div>
</div>
</section>
.home {
min-height: 100vh;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
background: #000000;
}
.info {
margin: 35px auto;
}
.info h1 {
color: #ffffff;
font-size: 2em;
font-weight: 600;
}
.content {
display: flex;
display: inline;
}
.content img {
flex: 0 0 50%;
width: 50%;
}
.content p {
flex: 0 0 50%;
width: 50%;
}