<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tyler</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="index.html" class="header-brand">bioxm</a>
<nav>
<ul>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<a href="cases.html" class="header-cases">Cases</a>
</nav>
</header>
<main>
<section class="index-banner">
<h2>I AM A FREELANCE WEB<br>DEVELOPER</h2>
<h1>With specialty in back-end development, functionality, UX design, and Search Engine Optimization</h1>
</section>
</main>
<footer>
</footer>
</body>
</html>
当我尝试向main添加背景时，标题部分被覆盖。看起来我已经正确关闭了所有内容，我无法理解为什么它会切入我的标题。这是我的CSS https://pastebin.com/8rbGmQ7R