Project - Flexbox Issue

I’m new to web development and working on my first project, a Metallica Fan-page.

https://github.com/CraigC93/Metallica-Project/tree/main/Web%20Pages (index) .

I’m currently having an issue with flex-box layout, on the tab “Discography”.

I have 12 flip cards that I want spaced evenly, 4 across and 3 rows down.

I have row 1(top row) and row 3(bottom row) laid out correctly.

However the middle row is not “playing ball”. (Black Album / Load / Re-Load / Garage Inc. )

Can anybody have a look through my code please? I know it may not be 100% cleaned up, however so far everything seems to work for me on my laptop through the VS Code path.

Thank you

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 410px;
  perspective: 1000px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  justify-content: space-evenly;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
  justify-content: space-evenly;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  justify-content: space-evenly;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  justify-content: space-evenly;
}

.flip-card-back {
  background-color: #333;
  color: white;
  transform: rotateY(180deg);
  justify-content: space-evenly;
}

.flip-card-back-disc {
  background-color: #333;
  color: white;
  transform: rotateY(180deg);
  height: 150%;
  justify-content: space-evenly;
}

#albums {
  background-color: #888888;
  color: #080808;
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

ol {
  justify-content: space-evenly;
  text-align: center;
  display: block;
}

<div class="flex-container">
  <div class="flip-card">
    <!--Kill Em All-->
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://upload.wikimedia.org/wikipedia/en/5/5c/Metallica_-_Kill_%27Em_All_cover.jpg" alt="Metallica Kill Em" style="width:300px;height:620px;">
      </div>
      <div class="flip-card-back-disc">
        <h1>1983 - ALBUM TRACKLIST</h1>
        <br>
        <ol>
          <li>"Hit the Lights"</li>
          <li>"The Four Horsemen"</li>
          <li>"Motorbreath"</li>
          <li>"Jump in the Fire"</li>
          <li>"(Anesthesia)—Pulling Teeth"</li>
          <li>"Whiplash"&ensp;&ensp;&ensp;&ensp;</li>
          <li>"Phantom Lord"</li>
          <li>"No Remorse"</li>
          <li>"Seek & Destroy"</li>
          <li>"Metal Militia"</li>

        </ol>
        <iframe src="https://open.spotify.com/embed/album/1aGapZGHBovnmhwqVNI6JZ" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>

      </div>
    </div>
  </div>

  <div class="flex-container">
    <div class="flip-card">
      <!--Ride The Lightning-->
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dwed9e0db5/images/releases/20150807_213911_7549_752890.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Lightning" style="width:300px;height:620px;">
        </div>
        <div class="flip-card-back-disc">
          <h1>1984 - ALBUM TRACKLIST</h1>
          <br>
          <ol>
            <li>"Fight Fire With Fire"</li>
            <li>"Ride the Lightning"</li>
            <li>"For Whom the Bell Tolls"</li>
            <li>"Fade to Black"</li>
            <li>"Trapped Under Ice"</li>
            <li>"Escape"&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</li>
            <li>"Creeping Death"</li>
            <li>"The Call of Ktulu"</li>
          </ol>
          <iframe src="https://open.spotify.com/embed/album/05DePtm7oQMdL3Uzw2Jmsc" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>


        </div>
      </div>
    </div>

    <div class="flex-container">
      <div class="flip-card">
        <!--Master Of Puppets-->
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dw2dcce125/images/releases/20150807_213928_7549_752891.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Puppets" style="width:300px;height:620px;">
          </div>
          <div class="flip-card-back-disc">
            <h1>1986 - ALBUM TRACKLIST</h1>
            <br>
            <ol>
              <li>"Battery"</li>
              <li>"Master Of Puppets"</li>
              <li>"The Thing That Should Not Be"</li>
              <li>"Welcome Home (Sanitarium)"</li>
              <li>"Disposable Heroes"</li>
              <li>"Leper Messiah"&ensp;&ensp;&ensp;</li>
              <li>" Orion"&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</li>
              <li>"Damage, Inc."</li>
            </ol>
            <iframe src="https://open.spotify.com/embed/album/2Lq2qX3hYhiuPckC8Flj21" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>


          </div>
        </div>
      </div>

      <div class="flex-container">
        <div class="flip-card">
          <!--And Justice For All-->
          <div class="flip-card-inner">
            <div class="flip-card-front">
              <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dw978ae3bb/images/releases/20150807_213942_7549_752892.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Metallica Justice" style="width:300px;height:620px;">
            </div>
            <div class="flip-card-back-disc">
              <h1>1988 - ALBUM TRACKLIST</h1>
              <br>
              <ol>
                <li>"Blackened"</li>
                <li>"...And Justice For All"</li>
                <li>"Eye Of The Beholder"</li>
                <li>"One"</li>
                <li>"The Shortest Straw"</li>
                <li>"Harvester Of Sorrow"</li>
                <li>"The Frayed Ends Of Sanity"</li>
                <li>"To Live Is To Die"</li>
                <li>"Dyers Eye"</li>
                <li>&ensp;</li>

              </ol>
              <iframe src="https://open.spotify.com/embed/album/2bKDte0I4SceROjBMtYtKV" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


</div>
</div>
</div>
</div>
</div>


<div class="flex-container">
  <div class="flip-card">
    <!--Black Album-->
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dw28fadafa/images/releases/20150807_215617_7549_752895.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Metallica Black" style="width:300px;height:620px;">
      </div>
      <div class="flip-card-back-disc">
        <h1>1991 - ALBUM TRACKLIST</h1>
        <br>
        <ol>
          <li>"Enter Sandman"</li>
          <li>"Sad But True"</li>
          <li>"Holier Than Thou"</li>
          <li>"The Unforgiven"</li>
          <li>"Wherever I May Roam"</li>
          <li>"Don't Tread On Me"</li>
          <li>"Through The Never"</li>
          <li>"Nothing Else Matters"</li>
          <li>"Of Wolf And Man"</li>
          <li>"The God That Failed"</li>
          <li>"My Friend Of Misery"</li>
          <li>"The Struggle Within"</li>

        </ol>
        <iframe src="https://open.spotify.com/embed/album/2Kh43m04B1UkVcpcRa1Zug" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
      </div>
    </div>
  </div>


  <div class="flex-container">
    <div class="flip-card">
      <!--Load-->
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dw1e473a35/images/releases/20150806_195123_7549_752578.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Metallica Load" style="width:300px;height:620px;">
        </div>
        <div class="flip-card-back-disc">
          <h1>1996 - ALBUM TRACKLIST</h1>
          <br>
          <ol>
            <li>"Ain't My Bitch"&ensp;&ensp;&ensp;&ensp;</li>
            <li>"2 X 4"&ensp;&ensp;&ensp;&ensp;&ensp;</li>
            <li>"Until It Sleeps"</li>
            <li>"The House Jack Built"</li>
            <li>"King Nothing"</li>
            <li>"Hero Of The Day"</li>
            <li>"Bleeding Me"&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</li>
            <li>"Cure"&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</li>
            <li>"Poor Twisted Me"</li>
            <li>"Wasting My Time"</li>
            <li>"Mama Said"&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</li>
            <li>"Thorn Within"&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</li>
            <li>"Ronnie"&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</li>
            <li>"The Outlaw Torn"</li>

          </ol>
          <iframe src="https://open.spotify.com/embed/album/6ndH0UlQbyCOVqByMXXhdV" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
        </div>
      </div>
    </div>

    <div class="flex-container">
      <div class="flip-card">
        <!--Re-Load-->
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dw1cf2d92d/images/releases/20150806_195123_7549_752579.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Metallica Reload" style="width:300px;height:620px;">
          </div>
          <div class="flip-card-back-disc">
            <h1>1997 - ALBUM TRACKLIST</h1>
            <br>
            <ol>
              <li>"Fuel"</li>
              <li>"The Memory Remains"</li>
              <li>"Devils Dance"</li>
              <li>"The Unforgiven II"</li>
              <li>"Better Than You"</li>
              <li>"Slither"</li>
              <li>"Carpe Diem Baby"</li>
              <li>"Bad Seed"</li>
              <li>"Where The Wild Things Are"</li>
              <li>"Prince Charming"</li>
              <li>"Low Man's Lyric"</li>
              <li>"Attitude"&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;</li>
              <li>"Fixxer"</li>
            </ol>
            <iframe src="https://open.spotify.com/embed/album/0Ip2GlQPoAIgdkqCO2YkMa" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</div>


<div class="flex-container">
  <div class="flip-card">
    <!--Garage Inc.-->
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dw18f2d514/images/releases/20150807_215626_7549_752896.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Metallica Garage Inc" style="width:300px;height:620px;">
      </div>
      <div class="flip-card-back-disc">
        <h1>1998 - ALBUM TRACKLIST</h1>
        <br>
        <ol>
          <li>"Free Speech for the Dumb"</li>
          <li>"It's Electric"</li>
          <li>"Sabbra Cadabra"</li>
          <li>"Turn the Page"</li>
          <li>"Die, Die My Darling"</li>
          <li>"Loverman" &ensp;</li>
          <li>"Mercyful Fate"</li>
          <li>"Whiskey in the Jar"</li>
          <li>"Tuesday's Gone"</li>
          <li>"The More I See"</li>



        </ol>
        <iframe src="https://open.spotify.com/embed/album/0vshXZYhBkbIoqxyC2fXcF" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
      </div>
    </div>
  </div>




  <div class="flex-container">
    <div class="flip-card">
      <!--St.Anger-->
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dwaea1afb5/images/releases/20150806_195125_7549_752582.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Metallica St.Anger" style="width:300px;height:620px;">
        </div>
        <div class="flip-card-back-disc">
          <h1>2003 - ALBUM TRACKLIST</h1>
          <br>
          <ol>

            <li>"Frantic"</li><br> &ensp;
            <li>"St.Anger"</li>
            <li>"Some Kind of Monster"</li>
            <li>"Dirty Window"</li>
            <li>"Invisible Kid" &ensp;</li>
            <li>"My World"</li>
            <li>"Shoot Me Again"</li>
            <li>"Sweet Amber"</li>
            <li>"The Unnamed Feeling"</li>
            <li>"Purify"</li>
            <li>"All Within My Hands"</li>



          </ol>
          <iframe src="https://open.spotify.com/embed/album/0HKpzK9ZoJ0oVA43E5gewM" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
        </div>
      </div>
    </div>



    <div class="flex-container">
      <div class="flip-card">
        <!--Death Magnetic-->
        <div class="flip-card-inner">
          <div class="flip-card-front">
            <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dw802392ca/images/releases/20150728_153549_7549_750011.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Metallica Death Magnetic" style="width:300px;height:620px;">
          </div>
          <div class="flip-card-back-disc">
            <h1>2008 - ALBUM TRACKLIST</h1>
            <br>
            <ol>
              <li>"That Was Just Your Life"</li>
              <li>"The End of the Line"</li>
              <li>"Broken, Beat & Scarred"</li>
              <li>"The Day That Never Comes"</li>
              <li>"All Nightmare Long"</li>
              <li>"Cyanide"</li>
              <li>"The Unforgiven III"</li>
              <li>"The Judas Kiss"</li>
              <li>"Suicide & Redemption"</li>
              <li>"My Apocalypse"</li>




            </ol>
            <iframe src="https://open.spotify.com/embed/album/3bK58rVcWBh3V3vxMLzi0V" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
          </div>
        </div>
      </div>


      <div class="flex-container">
        <div class="flip-card">
          <!--Hardwired-->
          <div class="flip-card-inner">
            <div class="flip-card-front">
              <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dw0ac6e0ab/images/releases/20160818_204624_7549_939498.jpg?sw=372&sh=372&sm=cut&sfrm=jpeg&q=95" alt="Metallica Hardwired" style="width:300px;height:620px;">
            </div>
            <div class="flip-card-back-disc">
              <h1>2016 - ALBUM TRACKLIST</h1>
              <br>
              <ol>

                <li>"Hardwired" &ensp;</li>
                <li>"Atlas, Rise!"</li>
                <li>"Now That We're Dead"</li>
                <li>"Moth Into Flame"</li>
                <li>"Dream No More"</li>
                <li>"Halo On Fire"&ensp;</li>
                <li>"Confusion"</li>
                <li>"ManUNkind"</li>
                <li>"Here Comes Revenge"</li>
                <li>"Am I Savage?"</li>
                <li>"Murder One"</li>
                <li>"Spit Out The Bone"</li>
              </ol>
              <iframe src="https://open.spotify.com/embed/album/4bcUiX49wpmDRhrC8TvDWV" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
            </div>
          </div>
        </div>


        <div class="flex-container">
          <div class="flip-card">
            <!--S&M 2-->
            <div class="flip-card-inner">
              <div class="flip-card-front">
                <img src="https://www.metallica.com/dw/image/v2/BCPJ_PRD/on/demandware.static/-/Sites-Metallica-Library/default/dw7d192221/images/releases/s-and-m-2.jpg?sw=372&sh=372&sm=cut&sfrm=jpg&q=95" alt="Metallica S&M2" style="width:300px;height:620px;">
              </div>
              <div class="flip-card-back-disc">
                <h1>2020 - ALBUM TRACKLIST</h1>
                <br>
                <ol>

                  <li>"The Ecstasy of Gold"</li>
                  <li>"The Call of Ktulu"</li>
                  <li>"For Whom the Bell Tolls"</li>
                  <li>"The Day That Never Comes"</li>
                  <li>"The Memory Remains"</li>
                  <li>"Confusion"</li>
                  <li>"Moth into Flame"</li>
                  <li>"The Outlaw Torn"</li>
                  <li>"No Leaf Clover"</li>
                  <li>"Halo on Fire"</li>
                  <li>"Scythian Suite"</li>
                  <li>"Iron Foundry"</li>
                  <li>"The Unforgiven III"</li>
                  <li>"All Within My Hands"</li>
                  <li>"(Pulling Teeth"</li>
                  <li>"Wherever I May Roam"</li>
                  <li>"One"&ensp;&ensp;</li>
                  <li>"Master of Puppets"</li>
                  <li>"Nothing Else Matters"</li>
                  <li>"Enter Sandman"</li>
                </ol>
                <iframe src="https://open.spotify.com/embed/album/7Hc3m7konwS0ugyN8vJhNg" width="100%" height="80" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
              </div>
            </div>
          </div>

You messed up your terminating </div> block. You need the four </div> s after “Garage Inc”, not before. I.e. move the last four </div>s from line 346 to after line 376.

There might be an extra </div> on line 346 to remove.

I don’t use Visual Studio Code, but if it has the ability to collapse code blocks, try collapsing your <div class="flip-card"> blocks to make sure your </div>s match correctly.