Home>

Hello.
Continuing from yesterday, we are creating a homepage for dot installation.
So the question is, if you put in "Dotinstall Pane Features", the image and background will fall down and text will be covered.
How can this be resolved?
I'm sorry for a simple question, but I'd appreciate it if you could tell me.

Code
<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "utf-8">
  Try<title>Dotinstall Pane</title>
 <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity = "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ + a4 + 0owXq79v + lsFkW54bOGbiDQ" crossorigin = "anonymous">
 <link rel = "stylesheet" href = "css/styles.css">
</head>
<body>
  <header>
    <div>
    <h1>Dotinstall Pane</h1>
    <p>
      <br>
      Atom package for coding
    </p>
    <a href = "#" target = "_ blank"
   >Learn more<i></i></a>
    <img src = "img/top.png"
    width = "480" height = "270"
    alt = "Image of Dotistall Pane"
  </header>
  <section>
    <div>
      <h1>Dotinstall Pane Features</h1>
  </section>
</body>
</html>
Code
body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
  color: # 333;
  margin: 0;
}
.container {
  width: 820px;
  margin: 0 auto;
  padding: 60px 0;
}
.orange-bg {
  color: #fff;
  background: url (../ img/bg.png);
  background-size: cover;
}
/ * header * /
header h1 {
   margin-top: 0;
   font-weight: normal;
   font-size: 36px;
   margin-bottom: 8px;
}
header p {
  margin-top: 0;
  margin-bottom: 50px;
}
header .container {
  position: relative;
}
header img {
  position: absolute;
  bottom: 0;
  right: 0;
}
.btn {
  display: inline-block;
  width: 290px;
  background: #fff;
  color: # f39800;
  text-align: center;
  text-decoration: none;
  padding: 8px 0;
  border-radius: 5px;
  opacity: 0.9;
}
.btn: hover {
  opacity: 1.0;
}
/ * features * /
.features h1 {
  text-align: center;
  font-weight: normal;
  font-size: 24px;
}