Текст перекрывается из-за высоты в процентах

В настоящее время я работаю над веб-страницей. Я хотел добавить к заголовку фон, размер которого зависел бы от размера окна браузера. Это означало, что мне нужно было добавить высоту в div, чтобы я мог изменять высоту фона в процентах. Когда я добавил высоту в div, текст веб-страницы перекрылся. До добавления высоты текст был в полном порядке. Я надеюсь это имеет смысл. Будем признательны за любую помощь в том, почему текст перекрывается или как это исправить.

Вот HTML

<div>
      <p>
    <h1>Jonathan's Programming Notes!</h1>
  </p>
  <div>
    <p>
      <h2>Lesson 1</h2>
    </p>
  <div>
    <p>
      <h3>Blah</h3>
    </p>
    <p>
      Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
    </p>
  </div>
  <div>
    <p>
      <h3>Content</h3>
    </p>
    <p>
      Content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content.
    </p>
  </div>
  <div>
    <p>
      <h3>Stuff</h3>
    </p>
    <p>
      Stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff.
    </p>
  </div>
</div>
<div>
  <p>
    <h2>Lesson 2</h2>
  </p>
  <div>
    <p>
      <h3>Words</h3>
    </p>
    <p>
      Words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words words.
    </p>
  </div>
  <div>
    <p>
      <h3>Text</h3>
    </p>
    <p>
      Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
    </p>
  </div>
</div>
<div>
  <p>
    <h2>Lesson 3</h2>
  </p>
  <div>
    <p>
      <h3>Repetition</h3>
    </p>
    <p>
      Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition Repetition.
    </p>
  </div>
  <div>
    <p>
      <h3>QWERTY</h3>
    </p>
    <p>
      QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY.
    </p>
  </div>

Вот CSS

div {
height:100vh;}
h1 {
background-image: url("http://gdurl.com/RGD0");
background-repeat: no-repeat;
background-size: 100% 104%;
max-width: 85%;
height: 70%;
font-size: 42px;
font-weight: 700;
text-align: center;
margin-left: auto;

Вот JSFiddle.