Landing Page (Help! Edit)

Tell us what’s happening:
Okay a couple of things that my code is doing that it should and I don’t know how to solve or why it’s happening.

EDIT:
Things that are not solved

  • The nav-bar that I previously had didn’t pass any of the tests; I don’t know why. So I erased it to try a different method but it’s not working and now I can’t remember what I had before :man_facepalming: :sweat:

  • As you can see on my site I have a red background-color which I am going to change after I just align everything.

  • I need help aligning it, I have watched a ton of Youtube videos explaining flexbox and read CSS properties but nothing is working for me and I don’t know what I did that actually worked.

Obviously more things are wrong on the site but I want to fix this first before I move onto the next problem. Thank you in advance :smiley:

Things that are already solved

The header is supposed to be the full screen. As you can see it has a white border. That didn’t happen before, it did work. But I don’t know why it suddenly changed to that arrange. Edit: This one is done :white_check_mark:

Like this:

  1. In the Pricing section, the prices are supposed to be aligned horizontally. I tried using CSS grid elements (display: grid, grid-template-column, ...) it worked but not like the sample code. I also tried copying it from the sample code but somehow it didn’t work on mine. Edit: This one is done :white_check_mark:

Thank you in advance and hope you like what I’ve done so far with my project :smiley:

My Project so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0.

Challenge: Build a Product Landing Page

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page

That white border is the default-margin of the body, setting it to 0 will remove the border.

Maybe it was just a typo, it’s grid-template-columns (plural).

You can just give the .nav-bar a background-color? Also some padding-bottom.

Well @jsdisco gave you the answer for first two, but for this as per your requirement, you want the header to change its background color from transparent to solid on scroll down, isn’t it? For that you need js, it cant be dont with css.

Yeah, that’s what I was thinking.
Thank you for answering though :smiley:

  1. I made the body margin to 0 and it worked.
  2. It wasn’t a typo, it was the property that I used. It got solved by this:
.pricing-container{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
}

With repeat(auto-fit, minmax(250px, 1fr));