Use flex layout

static/style.css

@@ -1,6 +1,13 @@
+.container {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+    gap: 15px;
+    align-items: flex-start;
+}
+
 p {
     font-family: sans-serif;
-    margin: 10px;
 }
 
 a {
@@ -8,15 +15,16 @@ a {
     color: black;
 }
 
+img {
+    max-width: 600px;
+}
+
 .dataframe {
     border-collapse: collapse;
-    margin: 25px 0;
     font-size: 0.9em;
     font-family: sans-serif;
     min-width: 400px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-    float: left;
-    margin: 10px;
 }
 
 .dataframe thead tr {

templates/base.html

@@ -5,8 +5,12 @@
 
 <title>Digitale Beschäftigtenbefragung</title>
 
+
 <p>Daten abgerufen: {{ timestamp }}</p>
 
 <p><i>Hinweis:</i> Die Daten entstammen der <a href="https://zusammen-geht-mehr.verdi.de/beschaeftigtenbefragung">Karte der digitalen Beschäftigtenbefragung</a> und sind dort nur für die ver.di-Bezirke auf Bezirksebene aufgelöst, bei denen TVStud auch als Schwerpunkt angegeben ist.</p>
 
-{{ tables|safe }}
+<div class="container">
+    <img src="{{ image }}"/>
+    {{ tables|safe }}
+</div>