Hello I am so sorry if this is a stupidly simple question but I am extremely new to html and css. The issue is I am trying to just add style to the div classes I have made in html and css seems to not recognize the file.
.main-content {
background-color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="second.css">
</head>
<body>
<div class="site">
<header class="masthead">
</header>
<h1 class="page-title">Hello
</h1>
<main class="main-content">
</main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div> <!-- .site -->
</body>
</html>I have tried on both firefox and chrome so it does not seem to be an issue of using an outdated browser. Also copy and pasting the code into codepen.io also yields the same results. The only way I can style is by selecting general elements such as h1. I've also double checked to make sure first.html and second.css are indeed the correct file names.
Any suggestions as to what I am missing? If its something very simple could I also get some advice so that I don't go about asking a ton of really simple questions like this.