How to Add Space on Text Inside <div> Using CSS when Padding Not Working as Expected

Question

I'm trying to adjust the position of a <div> inside another element, but it seems like the padding isn't having the desired effect.

How can I position my text to align with the red line in the image below? Padding doesn't seem to work for some reason. Thank you!

I'm attempting to position the text, as shown in the image below, to align with the red line:

HTML:

<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>

CSS:

.hero{
 background-color:#5FCF80;
  height: 80vh;
  top: 0;
  margin: 0;
}
header{
  display: block;
  padding: 20px;
  background-color: white;
  width: 100%;
  top: 0;
}
title{
padding: px 20px;
 display:table-cell;
vertical-align:middle;
font-size: 19px;
}

Answer 1

title is a class so css selector will start with . and correct padding syntax.

.title{
  padding: 40px;
 display:table-cell;
 vertical-align:middle;
 font-size: 19px;
} 

.hero{
 background-color:#5FCF80;
  height: 80vh;
  top: 0;
  margin: 0;
}
body{
  margin: 0;
  /*
  font-family: 'Varela Round', sans-serif;
  */
   font-family: 'Roboto', sans-serif;

}
header{
  display: block;
  padding: 20px;
  background-color: white;
  width: 100%;
  top: 0;
}
.title{
padding: 40px;
display:table-cell;
vertical-align:middle;
font-size: 19px;
}

Landing page
-->
<link href="https://fonts.googleapis.com/css?family=Roboto"rel="stylesheet">
<header>
  biography
</header>
<div class="hero">
   <div class="title">
     Lorem ipsum dolor si amet.
  </div>
</div>