@al-ameen36
Posted
Hello Marsha
Setting margin properties to "auto" means you are letting the browser calculate it for you. When used for left and right margins, it centers elements horizontaly. But its sometimes unpredictable for top and bottom margins.
So to fix your problem you need to change
section, article {
max-width: 400px;
margin: auto;
margin-bottom: 1.5rem;
}
to this
section, article {
max-width: 400px;
margin: 0 auto;
margin-bottom: 1.5rem;
}
This sets the margin top and bottom to "0" and the left and right margins to "auto". You can read up more about CSS margin values. Hope this helps :)
Marked as helpful
@Nestamash
Posted
@Ameen36 Hi, Thank you for your quick reply I appreciate it. However, I tried putting .... section, article{ margin: 0 auto; } But it did not solve my issues with alignment.
@al-ameen36
Posted
@Nestamash does your code look like this
section, article {
max-width: 400px;
margin: 0 auto;
margin-bottom: 1.5rem;
}
cos i only changed the margin and it worked fine on my PC
@Nestamash
Posted
@Ameen36 Yeah that's my code. Let me find out what's wrong.
@al-ameen36
Posted
@Nestamash You commented out align-items: center; on the ".cards" section element in your style.css. Try uncommenting it, because by default it gets set to align-items: stretch;. Setting the align-center value to "center" will center the items within, horizontally.
If it still doesn't work, sorry. Hopefully someone will help out. we are all learning after all :)
Marked as helpful
@Nestamash
Posted
@Ameen36 Thanks Muhammad. Uncommenting that line of code did the trick. Everything is now okay. On a previous challenge someone recommended I use HTML markups such as article, section, figure, did I deploy the markup well?
Thanks again, the code now works perfectly. You are a guru Muhammad.
@al-ameen36
Posted
@Nestamash Your HTML seems fine.
In some situations i just use divs, like when i just need to make alignments to related content within a section or article.
I would use a <div class="article-column"> for this <section class="article-column">. But that's just my understanding.
Glad i could help. Good luck and happy coding :)
Marked as helpful
@Nestamash
Posted
@Ameen36 Thanks, Muhammad.
