CSS Flex Section Background Color-CodePudding

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

#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;

CodePudding user response：

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 ></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"  data-form-type="action,next">
            </form>
        </section>

here this your code