Hey there, I'm working on a funny website dedicated to my friends in my computing class and I’ve run into an issue. The wrapper in my CSS isn't being applied to the webpage. It works fine on other pages of the site, but for some reason, it's not working here. Here’s the HTML code snippet:
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css>
<title>Comparing George and Adam's Physiques</title>
</head>
<body>
<div class="wrapper">
<h1> Exploring the physical differences between George and Adam </h1>
<div class="article ">
<ul>
<li>George is less chubby than Adam.</li>
<li>George has superior hair compared to Adam.</li>
<li>George sports a manly stubble collection.</li>
<li>Simply put, George wins in the looks department over Adam.</li>
</ul>
<div class="littlearticle">
<p> <a href="george_vs_adam.html"> Click here to go back to the homepage </a> </p>
</div>
</div>
</div>
</html>
Here's the relevant section of my CSS code:
body {
text-align: left;
}
.wrapper {
width: 40em;
text-align: left;
margin-left: 150px;
margin-right: 150px;
padding: 8px;
}
h1 {
color: red;
background-color: white;
font-family: tahoma;
border-top: 2px double red;
border-bottom: 2px dashed red;
padding: 8px;
}
.article {
color: blue;
font-family: consolas;
font-size: medium;
background-color: yellow;
padding: 8px;
}
.littlearticle {
color: black;
font-family: consolas;
font-size: medium;
background-color: red;
padding: 8px;
}