diff --git a/attack-theme/static/style/_layouts.scss b/attack-theme/static/style/_layouts.scss
index 7094f853265..9d3e0ea5aef 100644
--- a/attack-theme/static/style/_layouts.scss
+++ b/attack-theme/static/style/_layouts.scss
@@ -603,6 +603,8 @@ a.partial-underline {
         &.button-group {
             display: flex;
             justify-content: center;
+            flex-wrap: wrap;
+            gap: 12px;
         }
     }
     .card-footer-no-button {
@@ -635,16 +637,6 @@ a.partial-underline {
     }
 }
 
-.card-button-container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    a {
-        width: 100%;
-        margin: 0 8px;
-    }
-}
-
 .card-button {
     @extend .brand-button;
     border: 0;
diff --git a/attack-theme/templates/macros/contact_card.html b/attack-theme/templates/macros/contact_card.html
index d94f9bbb156..f5137848292 100644
--- a/attack-theme/templates/macros/contact_card.html
+++ b/attack-theme/templates/macros/contact_card.html
@@ -36,7 +36,6 @@
     {% if buttons %}
     <div class="card-footer no-background button-group">
         {% for button in buttons %}
-        <div class="card-button-container">
             <a href="{{button.url}}">
                 <button type="button" class="card-button">
                     <span class="card-button-text text-nowrap">
@@ -47,7 +46,6 @@
                     </span>
                 </button>
             </a>
-        </div>
         {% endfor %}
     </div>
     {% endif %}