Help with my code!?

Community
#1

Hi all! i’m very new to coding so i’m watching a video and trying to replicate it in my code. For some reason when I put exactly the same code into my software it comes out with a different response… The HTML is working fine; however, when i try and put styling on it some of it isn’t applied to the code.

This is part of the HTML


<title> Acme Web design | Welcome! </title>
 <link rel="stylesheet" href="./css/style.css">   
</head>
    
<body>
    <header>
        <div class="container">
        <div id="branding">
             <h1> Acme web design</h1>
        </div> 
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
        </ul>
    </nav>
        </div>
        
    </header>
    
    <section id="showcase">
    <div class="container">
    <h1>Affordable Professional web design</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
    </div>
    </section>
        
    <section id="newsletter">
    <div class="container"></div>
         
    <h1> subscribe to our newsletter</h1>
         <form>
        <input type="email" placeholder="enter email...">
     <button type="submit" class="button_1">Subscribe</button>

This is the CSS

body {
    font-family: sans-serif, helvetica, Arial;
    font-size :15px;
    line-height: 1.5;
    padding:0;
    Margin:0;
    background-color:#f4f4f4;
}

.container{
    width:80%;
    margin:auto;
    overflow:hidden;

Because the margin is set to auto everything should be moved to the middle, however, the newsletter section hasnt moved and has stayed to the left. Obviously this looks odd and i have no idea why it hasnt moved along with everything else…
Any ideas??
Appreciate any help!
Thanks,
Lauren

#2

you close the container directly after opening it? The h1 header, form and everything else isn’t nested inside the container. The problem is with your html code

#3

Thanks!
How do I put it all in the container? Is only one needed?

#4

the div has an opening tag with class container, then everything what should be inside the container should come before the div closing tag

elements always (with a few exceptions) come in pairs, consisting of opening and closing tag. Anything which should be a child (aka inside) some element, needs to be nested between the opening and closing tag