CSS 柔性部分背景颜色

Question

I have built a product landing page using Flex. I have a section which I have given an id="hero". Right now, the background color (#e0bdfc) extends to the full width of the browser window. However, I would like to have it cut off at around 1000px (which is the same as my container max-width and my footer). When I tried using max-width: 1000px;, nothing happened. I'm not sure why. I wonder if something else in my entire CSS is affecting it. Maybe not. Below is my CSS snippet for #hero.

#hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 200px;
    margin-top: 50px;
    background-color: #e0bdfc;
    
}

If you need to view my full html and css files, you can view them on Github here .

You can view the live site here to see my code in context.

Thanks for any advice.

Answer 1

I'm not sure why max-width didn't work for you, but it did for me in the inspector tool. I also centered the element by setting margin left and right to auto while keeping your top margin. Hopefully this helps!

#hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 200px;
    max-width: 1000px;
    margin: 50px auto 0;
    background-color: #e0bdfc;

Answer 2

You didn't wrap this part of the hero part in container, so the width of that part doesn't follow the container,try to wrap the hero part first.I hope this helps

 <div class="container"></div> <section id="hero"> <h2>Handcrafted, home-made masterpieces</h2> <form id="form" action="https://www.freecodecamp.com/email-submit" data-dashlane-rid="8ad77776c40e5c69" data-form-type="register,step"> <input name="email" id="email" type="email" placeholder="Enter your email address" required="" data-form-type="email"> <input id="submit" type="submit" value="Get Started" class="btn" data-form-type="action,next"> </form> </section>

here this your code

Answer 3

I also try to add max-width: 1000px and margin: 0 auto to center the block and then it worked.

You can try to add this code:

#hero {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 height: 200px;
 background-color: #e0bdfc;
 margin: 0 auto;
 max-width: 1000px;

}

This is the result: