I'm facing some difficulty with aligning my li elements properly within rows. Despite trying various approaches, including using nth-child selectors and IDs for testing purposes, I am still unable to resolve the issue as expected.
#section2 {
width: 50%;
}
#sec2grid {
display: grid;
grid-template-columns: 30% 70%;
grid-template-rows: repeat(6, 17%);
}
#section2 ul {
list-style: none;
}
#section2 li {
margin-top: 30px;
font-size: var(--text);
font-weight: bold;
}
#sec2grid img:nth-child(1) {
grid-column-start: 1;
grid-row-start: 1;
}
#sec2grid img:nth-child(2) {
grid-column-start: 1;
grid-row-start: 2;
}
#sec2grid img:nth-child(3) {
grid-column-start: 1;
grid-row-start: 3;
}
#sec2grid img:nth-child(4) {
grid-column-start: 1;
grid-row-start: 4;
}
#sec2grid img:nth-child(5) {
grid-column-start: 1;
grid-row-start: 5;
}
#sec2grid img:nth-child(6) {
grid-column-start: 1;
grid-row-start: 6;
}
#sec2li1 {
grid-column-start: 2;
grid-row: 1 / 1;
}
#sec2li2 {
grid-column-start: 2;
grid-row: 2 / 2;
}
#sec2li3 {
grid-column-start: 2;
grid-row: 3 / 3;
}
#sec2li4 {
grid-column-start: 2;
grid-row: 4 / 4;
}
#sec2li5 {
grid-column-start: 2;
grid-row: 5 / 5;
}
#sec2li6 {
grid-column-start: 2;
grid-row: 6 / 6;
}<section id="section2">
<h2>How to Place<br>an Order?</h2>
<div class="separator"></div>
<div id="sec2grid">
<img src="style/img/1.svg">
<img src="style/img/2.svg">
<img src="style/img/3.svg">
<img src="style/img/4.svg">
<img src="style/img/5.svg">
<img src="style/img/6.svg">
<ul>
<li id="sec2li1"><span class="colorGreen">Contact </span>our team, present your requirements.</li>
<li id="sec2li2">A dedicated representative reviews your request, offers a <span class="colorGreen">selection of suitable products</span>and sources equipment from our network of certified partners.</li>
<li id="sec2li3">Choose your warranty:<span class="colorGreen"> 12 months or 24 months<<br></li>
<li id="sec2li4">We provide you with an estimate, <span class="colorGreen">you confirm your order</span><</li>;
<li id="sec2li5">On average in 5 business days, <span class="colorGreen">your order will be shipped to you<</span>/></li>;.
<li id="sec2li6">Guaranteed <span class="colorGreen">Customer Support</span> by the team.</li>
</ul>
</div>
</section>Appreciate any assistance you can offer.