problem : using the same css but another image have been pushed upwards-CodePudding

I am newbie with html css and here is my problem.

I code a very simple html css program as you can see in this link

https ://codepen.io/anhbui2904/pen/KKXQKGg

And, my problem is, as you can see in the result, the left square has been pushed upward.

My problem is, I coded it as the same with another square, as you can see in the code.

Maybe it is because of the course-item css ?

Could you please help me to solve this problem to make it to be the same height ? Thank you very much for your time.

CodePudding user response：

You're nesting containers. Each of which brings some more margin-top along with it. The left block is in only in 1 col, but the others are wrapped within 2 layers of it.

If your goal is to have 4 similar/aligned blocks then the structure of your HTML is a bit odd. Why not just have 4 blocks in the same parent ?

CodePudding user response：

It's because the structure is different, for class category ,it's nested inside row and column

<div >
 <div >
  <div >

but for class course-item, it's nested inside 2 sets of row and column.

<div >
 <div >
  <div >
   <div >

You can use css for category class to align e.g margin-top

CodePudding user response：

Why you are nesting the first col seperately. Nest all the col inside single parent.