I am remaking my portfolio and in the projects section I want the description on column and the project image on the other. I have used grids in the past without having an issue with the width of the columns and the spacing, but this time, I cannot figure out why the columns are of equal width.
HTML
<section class="projects">
<h2 class="projects-title">Projects</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 project-desc">
<h1>Tindog</h1>
<p>An landing page for the Tindog app. A twist on a typical dating app.</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<img class="project-img-right" src="images/tindog.png">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-6 col-sm-12">
<img class="project-img-left" src="images/3cardcomp.png">
</div>
<div class="col-lg-6 col-lg-6 col-sm-12 project-desc">
<h1>Tindog</h1>
<p>An landing page for the Tindog app. A twist on a typical dating app.</p>
</div>
<div class="row">
<div class="col-lg-6 col-lg-6 col-sm-12 project-desc">
<h1>Tindog</h1>
<p>An landing page for the Tindog app. A twist on a typical dating app.</p>
</div>
<div class="col-lg-6 col-lg-6 col-sm-12">
<img class="project-img-right" src="images/burgerstogo.png">
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-6 col-sm-12">
<img class="project-img-left" src="images/nftcard.png">
</div>
<div class="col-lg-6 col-lg-6 col-sm-12 project-desc">
<h1>Tindog</h1>
<p>An landing page for the Tindog app. A twist on a typical dating app.</p>
</div>
</div>
</div>
</section>
This is what I have created so far with HTML.I though a class of col-lg-6 would make all of these rows even but it's not working.
CSS
.row {
position: relative;
}
.project-desc {
padding: 2rem;
margin: 3rem;
width: 20%;
}
.project-img-right {
width: 40rem;
margin: 3rem;
}
.project-img-left {
width: 40rem;
margin: 3rem;
}
This is all I have done so far with this section in CSS.
Image of the project section created with Bootstrap 5 Grid
Image of the project section created with Bootstrap 5 Grid with inspection tools
I provide two images with of the project section to explain what it looks like currently. I would like each column to take up 50% of the row.
col-*-6parts of your HTML then each column should indeed take up 50% of the screen. I think the widths you are adding to the CSS are messing about. Also, just a side note. As you move down your HTML, notice that you begin using two sets ofcol-lg-6on each Div. This is just a typo where one should be readingcol-md-6I think.