four-card-feature-section

Community feedback

• 

  Muhammad Al-Ameen Abdullahi•260

  @al-ameen36Posted about 2 years ago

  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

  1

  ---

  

  marsha•210

  @NestamashPosted about 2 years ago

  @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.

  0

  

  Muhammad Al-Ameen Abdullahi•260

  @al-ameen36Posted about 2 years ago

  @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

  1

  

  marsha•210

  @NestamashPosted about 2 years ago

  @Ameen36 Yeah that's my code. Let me find out what's wrong.

  0

  

  Muhammad Al-Ameen Abdullahi•260

  @al-ameen36Posted about 2 years ago

  @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

  1

  

  marsha•210

  @NestamashPosted about 2 years ago

  @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.

  0

  

  Muhammad Al-Ameen Abdullahi•260

  @al-ameen36Posted about 2 years ago

  @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

  1

  

  marsha•210

  @NestamashPosted about 2 years ago

  @Ameen36 Thanks, Muhammad.

  0