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