The HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Holder</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="main">
<div id="container">
<div id="header">
<ul id="menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Soundcloud</a></li>
</ul>
<div id="logo">
<h1>Logo</h1>
</div>
<div id="introduction">
<h3> Holder</h3>
</div>
</div> <!--end header -->
<div id="content">
<h2>Holder</h2>
<h3>Holder</h3>
<div id="points">
<div id="point1">
<h3>Holder</h3>
<p>Holder</p>
</div>
<div id="point2">
<h3>Holder</h3>
<p>Holder</p>
</div>
<div id="point3">
<h3>Holder</h3>
<p>Holder</p>
</div>
<div id="point4">
<h3>Holder</h3>
<p>Holder</p>
</div>
<div id="point5">
<h3>Holder</h3>
<p>Holder.</p>
</div>
<div id="point6">
<h3>Holder</h3>
<p>Holder</p>
</div>
</div> <!-- end points -->
</div> <!--end content -->
</div> <!-- end main container -->
</div> <!-- end main -->
<div id="footer">
<div id="container">
<p>Copyright ©2018 <br/>
All Rights Reserved</p>
</div> <!-- end footer container -->
</div> <!-- end footer -->
</body>
</html>
The CSS:
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px;}
body {font-family: Arial, Helvetica, sans-serif;}
.container {
width: 800px;
margin: 0 auto;
}
I feel like this should work and have look over it many times. No matter what the width is set to it doesn’t change.
Any help is really appreciated and if its something simple dont hate