fixed alignment of titles

public/styles.css

@@ -98,6 +98,7 @@ div.audiocard {
   text-align: left;
   padding: 15px;
   border-radius: 15px;
+  height: fit-content;
 }
 
 div.audiocard-floating-left {

template-music.html

@@ -28,40 +28,45 @@
 
     <h2 id="djent">djent</h2>
 
-    <div class="audiocard audiocard-floating-left">
+    <div style="display: flex;">
-        <img class="albumcoversmall"
+        <div class="audiocard audiocard-floating-left">
-            src="https://archive.org/download/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321-28191981668_thumb250.jpg"
+            <img class="albumcoversmall"
-            alt="Album cover of Periphery's Juggernaut: Alpha">
+                src="https://archive.org/download/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321-28191981668_thumb250.jpg"
-        <div class="audioinner">
+                alt="Album cover of Periphery's Juggernaut: Alpha">
-            <p>Periphery - Rainbow Gravity</p>
+            <div class="audioinner">
-            <a href="https://sumerianrecords.bandcamp.com/album/juggernaut-alpha">Juggernaut: Alpha</a>
+                <p>Periphery - Rainbow Gravity</p>
-            <audio controls>
+                <a href="https://sumerianrecords.bandcamp.com/album/juggernaut-alpha">Juggernaut: Alpha</a>
-                <source src="../music/Periphery - Juggernnaut Alpha.mp3" type="audio/mpeg">
+                <audio controls>
-                Your browser does not support the audio element.
+                    <source src="../music/Periphery - Juggernnaut Alpha.mp3" type="audio/mpeg">
-            </audio>
+                    Your browser does not support the audio element.
+                </audio>
+            </div>
         </div>
-    </div>
 
-    <p>{{djent-paragraph}}</p>
+        <p>{{djent-paragraph}}</p>
+
+    </div>
 
     <h2 id="metalcore">metalcore</h2>
 
-    <div class="audiocard audiocard-floating-right">
+    <div style="display: flex;">
-        <img class="albumcoversmall"
+        <p>{{metalcore-paragraph}}</p>
-            src="https://archive.org/download/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054-26050116040_thumb250.jpg"
+
-            alt="Album cover of Invent Animate's Greyview">
+        <div class="audiocard audiocard-floating-right">
-        <div class="audioinner">
+            <img class="albumcoversmall"
-            <p>Invent Animate - Cloud Cascade</p>
+                src="https://archive.org/download/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054-26050116040_thumb250.jpg"
-            <a href="https://inventanimate.bandcamp.com/album/greyview">Greyview</a>
+                alt="Album cover of Invent Animate's Greyview">
-            <audio controls>
+            <div class="audioinner">
-                <source src="../music/Invent Animate - Cloud Cascade.mp3" type="audio/mpeg">
+                <p>Invent Animate - Cloud Cascade</p>
-                Your browser does not support the audio element.
+                <a href="https://inventanimate.bandcamp.com/album/greyview">Greyview</a>
-            </audio>
+                <audio controls>
+                    <source src="../music/Invent Animate - Cloud Cascade.mp3" type="audio/mpeg">
+                    Your browser does not support the audio element.
+                </audio>
+            </div>
         </div>
     </div>
 
-    <p>{{metalcore-paragraph}}</p>
-
     <h3>invent animate</h3>
 
     <p>{{invent-animate-paragraph}}</p>