Pure css parallax effect producing uneven sections

I am trying to produce a very simple website with four sections using the parallax effect. Each section has a background image, a title and a subtitle. Even though all four images are exactly the same height (600px), only a fraction of the third section shows before the final section appearing. The footer also doesn't show. There's some overlapping going on but I don't understand what it could be.

body{ font-family: 'Comfortaa', cursive;}

header {
  color:#fff;
  background-color:blue;
  font-size: 3em;
  height:50px;
}
footer {
    color:#fff;
    background-color:red;
    font-size: 3em;
    height:50px;
}
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 600px;
}
.bgimg-1 {
  background-image: url("logo.jpg");
}

.bgimg-2 {
  background-image: url("one.jpg");
}

.bgimg-3 {
  background-image: url("two.jpg");
}

.bgimg-4 {
  background-image: url("three.jpg");
}

.caption {
  position: absolute;
  left: 0;
  top: 30%;
  width: 100%;
  text-align: center;
  color: #000;

}
.subtxtd{
    color:#000;
  text-align:center;
  font-size: 1em;
  text-shadow: 5px 5px 10px;
}
 .sectitled {
    color:#000;
  font-size: 2em;
  font-weight: 500;
  text-shadow: 5px 5px 10px;
 }
 .subtxtl{
    color:#fff;
  text-align:center;
  font-size: 1em;
  text-shadow: 5px 5px 10px;
}
 .sectitlel {
    color:#fff;
  font-size: 2em;
  font-weight: 500;
  text-shadow: 5px 5px 10px;
 }

<html>
    <meta charset="utf-8" /> 
    <head>
        <title> test </title>
        <link rel="stylesheet" type="text/css" href="style.scss">
    </head>
    <body>
        <header>
            This is the  header
        </header>
        <main>
            <div class="bgimg-1">
                <div class="caption">
                    <div class="sectitled">Blake's 7</div>
                    <div class="subtxtd">This is great sci-fi</div>
                </div>
            </div>
            <div class="bgimg-2">
                <div class="caption">
                    <div class="sectitled">The Team</div>
                    <div class="subtxtd">All but one are good guys</div>
                 </div>
            </div>
            <div class="bgimg-3">
                <div class="caption">
                    <div class="sectitlel">Avon</div>
                    <div class="subtxtl"> This one is tricky, watch out! </div>
                <div>
            </div>
            <div class="bgimg-4">
                <div class="caption">
                    <div class="sectitled">The Orac</div>
                    <div class="subtxtd">will give you the answer to everything!</div>
                </div>
            </div>
        </main>
        <footer>
            This is the footer
        </footer>
    </body>
</html>

Solution

The problem is entirely down to the fact that you have a single typo resulting in invalid markup. Your <div class="bgimg-3"> ends the .caption with a <div> instead of a </div>, which results in the parser getting confused and not calculating offsets / heights correctly.

You can ensure that you have valid markup by validating your HTML with the W3 Validation Service. You can also validate your CSS with the CSS Validator (though in this case the CSS is valid).

Correcting the <div> resolves the issue, as can be seen in the following example:

body {
  font-family: 'Comfortaa', cursive;
}

header {
  color: #fff;
  background-color: blue;
  font-size: 3em;
  height: 50px;
}

footer {
  color: #fff;
  background-color: red;
  font-size: 3em;
  height: 50px;
}

.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 600px;
}

.bgimg-1 {
  background-image: url("http://placehold.it/101");
}

.bgimg-2 {
  background-image: url("http://placehold.it/102");
}

.bgimg-3 {
  background-image: url("http://placehold.it/103");
}

.bgimg-4 {
  background-image: url("http://placehold.it/104");
}

.caption {
  position: absolute;
  left: 0;
  top: 30%;
  width: 100%;
  text-align: center;
  color: #000;
}

.subtxtd {
  color: #000;
  text-align: center;
  font-size: 1em;
  text-shadow: 5px 5px 10px;
}

.sectitled {
  color: #000;
  font-size: 2em;
  font-weight: 500;
  text-shadow: 5px 5px 10px;
}

.subtxtl {
  color: #fff;
  text-align: center;
  font-size: 1em;
  text-shadow: 5px 5px 10px;
}

.sectitlel {
  color: #fff;
  font-size: 2em;
  font-weight: 500;
  text-shadow: 5px 5px 10px;
}

<html>
<meta charset="utf-8" />

<head>
  <title> test </title>
  <link rel="stylesheet" type="text/css" href="style.scss">
</head>

<body>

  <header>
    This is the header
  </header>

  <main>

    <div class="bgimg-1">
      <div class="caption">
        <div class="sectitled">Blake's 7</div>
        <div class="subtxtd">This is great sci-fi</div>
      </div>
    </div>


    <div class="bgimg-2">
      <div class="caption">
        <div class="sectitled">The Team</div>
        <div class="subtxtd">All but one are good guys</div>
      </div>
    </div>


    <div class="bgimg-3">
      <div class="caption">
        <div class="sectitlel">Avon</div>
        <div class="subtxtl"> This one is tricky, watch out! </div>
      </div>
    </div>


    <div class="bgimg-4">
      <div class="caption">
        <div class="sectitled">The Orac</div>
        <div class="subtxtd">will give you the answer to everything!</div>
      </div>
    </div>
  </main>

  <footer>
    This is the footer
  </footer>
</body>

</html>

Hope this helps! :)