HTML and CSS attempting to use BEM

Community feedback

• 

  Shahin NJ•1,190

  @SJ-NosratPosted over 3 years ago

  Hi Geoff, Good looking project! Nicely done!

  However, did you notice that your footer is at the top of your webpage?

  That's because you have your <main> with a height of zero (0). And the reason for that is probably you have an element floating somewhere in the CSS rules you've applied.

  I tried to add the overflow: hidden; to the <main> but to no avail. I think one other thing that is causing your <main> height to become zero is that you're not giving the parent container a position: relative; whenever you're applying a position: absolute; to it's children. For example:

   main {
     position: relative;
  }
  
  .card {
     position: absolute;
  }
  

  From the above code I had the <main> tag to have position: relative; since you added position: absolute; to the class .card.

  Now here's where things to wacky; you added position: absolute; to the class .card__summary but then that means you have to add position: relative; to the class .card, however you've already added position: absolute;.

  The problem is coming from the way you're going about centering your content; a solution would be to remove all the position styling, and add a display: flex to the <main> and center it that way, since I clearly see that you know how to use CSS Flexbox by adding flexbox rules to the .card__summary class.

  Hope the above helps!

  Best of luck with your coding journey!

  Marked as helpful

  1