index.css

h2 {
  text-align: center;
  font-size: 200%;
}

.box {
  border: solid 2px black;
  width: 50px;
  height: 50px;
  margin: 20px;
  display: inline-block;
}

#box1 {
  background: red;
}

index.html

<h1>
Homework
</h1>

<h2>
Lesson 1 - Background colors
</h2>

<p>
Below there are three boxes. Box 1 has already been painted red. Can you paint box2 yellow and box3 pink?
</p>

<div>

<div id="box1" class="box">
</div>

<div id="box2" class="box">
</div>

<div id="box3" class="box">
</div>

</div>


<h2>
Lesson 2 - Font size and text alignment
</h2>

<p class="lesson2">
Can you make this text bigger and have it centered on the page just like the heading?
</p>

<h2>
Lesson 3 - <a href="https://www.codecademy.com/courses/learn-html/lessons/intro-to-html/exercises/intro">Hyper texts</a>
</h2>

<p>
Can you make this a link that takes the user to your favorite website?
</p>