Product Landing Page A flex-container inside a flex-container

Hello All.

I am typing this with the hope that someone can assist me. I have completed the Product Landing Page project. My code passes all of the tests but, I don’t want to submit it yet. It looks as though I have a flex-container INSIDE my flex-container (under FAQs). And, my nav bar is coded to be “fixed” but, it isn’t. Any help you can give would be appreciated. You can find the project at https://codepen.io/scmiller/pen/XWmxqqv.

Thank you.

Hello and Welcome to FCC Forum @SClover72,

  • Here’s a screenshot of your css for your nav-bar problem. Can you tell me what’s wrong?
    image
  • For your triple display flex, you have 3 of the same classes, with the same css. They are also nested(element inside another element) inside each other. This will cause it.
    image
  • You might want to go to the W3C Validator, you might want to address some errors.
    Since you are using codepen, you can ignore the first 2 errors.

Hello. Thank you for looking at it. I can’t tell you what I have done wrong.

I have tried the W3C Validator but, it couldn’t check it for some reason.

  • The div and is given a class of nav-bar. As you can recall on this lesson Use CSS Classes, it stated that when you are calling a class, you have to start it with a . period. Now can you tell me what’s wrong in this code?
    image

You can go here, https://validator.w3.org/nu/#textarea and copy paste your code inside the text area.

I added the . in front of ‘div nav-bar’ but, it didn’t fix the problem.

Well, the div is given the class nav-bar. That means if you want to select that, you just combine them together. EX:

/* Do's */

element.classname {
       ↑/*no spaces*/
}

If you put a space in between, you are telling the code to look for an element with the class nav-bar that is nested inside a div.

Great. I have just managed to make the problem even worse. What is the correct code? I have been at this for hours now.

I just ran it through W3C, there are several errors. How is it even passing the tests at this point?

The FCC test is only looking for the several things that you learned throughout the challenges in the /learn tab. If you are a beginner and haven’t finished it, it would be a really hard job to do. The W3C validator in the other hand is looking for errors that you make on your HTML5 Docs. It tries to help you to have a valid and correct document.

Ironically, the errors in the flex-container are not listed among them so, I am STILL trying to find out how to code that so I get the look that I want. I really need to accept this for what it is and submit it.

Do I need to eliminate the between my div classes?image

Most of the time, projects are where we coders learn from. When we are doing a project, we start to think of ideas and how to make it look nice. Then we ran into problems, then that’s when we start using Google. But we still try to limit ourselves not to copy any codes and only use it when you need it. Learning it yourself is when you’re gonna be really proud of your project, then you start to get more motivation. Sometimes coding can be frustrating, but never give up. Take a break, for a day. Take a walk, get food, make coffee or tea. There are a lot of ways to relax. Try to relax, eventually something will come up. Then your’re motivated again. Don’t ever give up. That is the first step to failure.

It turns out, you have a lot of unclosed <div> tags. I put your code through my code editor, and it spits out that there are unclosed divs. I labeled them with some comments in this picture

I now have it looking exactly as I want it. Sadly, I have done so many different things at this point I don’t recall which has worked. I worry that I will not remember this in the future.

Thank you for your help.

1 Like