diff --git a/docs/quick_look.css b/docs/quick_look.css
index 2ae99e4..f864b8b 100644
--- a/docs/quick_look.css
+++ b/docs/quick_look.css
@@ -29,7 +29,13 @@
   flex-direction: column;
   align-items: flex-start;
   flex-grow: 1;
+}
+
+.quicklook-genre-container  {
+  display: flex;
+  align-items: flex-start;
   flex-wrap: wrap;
+  gap: 0px 20px;
 }
 
 .quicklook-genre {
diff --git a/docs/reviews/the-french-dispatch/index.html b/docs/reviews/the-french-dispatch/index.html
index 93d9297..028317d 100644
--- a/docs/reviews/the-french-dispatch/index.html
+++ b/docs/reviews/the-french-dispatch/index.html
@@ -66,7 +66,7 @@
     </div>
     <div class="quicklook-genre-section">
       <span class="caption">Genre</span>
-      <div>
+      <div class="quicklook-genre-container">
         
           <span class="quicklook-emphasized-color quicklook-genre">Comedy</span>
         
diff --git a/layouts/partials/quicklook.html b/layouts/partials/quicklook.html
index ececa36..12cfc80 100644
--- a/layouts/partials/quicklook.html
+++ b/layouts/partials/quicklook.html
@@ -11,7 +11,7 @@
     </div>
     <div class="quicklook-genre-section">
       <span class="caption">Genre</span>
-      <div>
+      <div class="quicklook-genre-container">
         {{ range $name := .Params.genres }}
           <span class="quicklook-emphasized-color quicklook-genre">{{$name}}</span>
         {{end}}
diff --git a/static/quick_look.css b/static/quick_look.css
index 2ae99e4..f864b8b 100644
--- a/static/quick_look.css
+++ b/static/quick_look.css
@@ -29,7 +29,13 @@
   flex-direction: column;
   align-items: flex-start;
   flex-grow: 1;
+}
+
+.quicklook-genre-container  {
+  display: flex;
+  align-items: flex-start;
   flex-wrap: wrap;
+  gap: 0px 20px;
 }
 
 .quicklook-genre {