Margin-right property not working for Landing product page

HTML-CSS
1

I want my icons to the right of my texts as shown here:

navbarproductlanding
navbarproductlanding1920×485 22.8 KB

But when I adjust my .service-icon class the margin -right property doesn’t work.

I also wrote the margin right property in my second container class and that didn’t seemed to work either.

2

Take a look at how you have your containers set up; I think you missed one in the CSS :slight_smile:

<div class="second-container">
       <!--first item-->
       <article class="item">
               <span class="service-icon">
                       <i class="fas fa-truck"></i>
                </span>
                <div class="service-info">
                </div>
       </article>
       <!--end of first item-->

.second-container is set to Flex Column; putting all <articles> in a column which I think is what you want.

how do you want each .item displayed?

3

I want it position like the items in the photo

navbarproductlanding
navbarproductlanding1920×485 22.8 KB

4

I added .item{
margin-right:20px;
}. Still didn’t work

5

review your CSS for .item … and make sure you have it display: the way you want

edit: hint; you’ve been using Flexbox and that would work well here too

1 Like
6

That seemed to do the trick: https://codepen.io/noblegas/pen/wvvxJMy

Thank you so much!