diff --git a/layouts/shortcodes/client-logos.html b/layouts/shortcodes/client-logos.html
index 9cddf86..83cec94 100644
--- a/layouts/shortcodes/client-logos.html
+++ b/layouts/shortcodes/client-logos.html
@@ -1,16 +1,18 @@
 <section class="border-y border-gray-100 overflow-hidden">
-    <div class="py-12">
-        <p class="text-center text-sm font-medium text-gray-600 mb-8">{{ .Get "title" | default "Trusted by leading companies worldwide" }}</p>
-        <div class="logo-scroll">
-            <div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
-                {{ range .Page.Params.client_logos }}
-                <img src="{{ .logo | relURL }}" alt="{{ .name }}" />
-                {{ end }}
-                {{ if ne (.Get "animate" | default "true") "false" }}
+    <div class="container mx-auto">
+        <div class="py-12">
+            <p class="text-center text-sm font-medium text-gray-600 mb-8">{{ .Get "title" | default "Trusted by leading companies worldwide" }}</p>
+            <div class="logo-scroll">
+                <div class="logos-slide{{ if ne (.Get "animate" | default "true") "false" }} animate{{ end }}">
                     {{ range .Page.Params.client_logos }}
                     <img src="{{ .logo | relURL }}" alt="{{ .name }}" />
                     {{ end }}
-                {{ end }}
+                    {{ if ne (.Get "animate" | default "true") "false" }}
+                        {{ range .Page.Params.client_logos }}
+                        <img src="{{ .logo | relURL }}" alt="{{ .name }}" />
+                        {{ end }}
+                    {{ end }}
+                </div>
             </div>
         </div>
     </div>
@@ -61,7 +63,7 @@
         transform: translateX(0);
     }
     to {
-        transform: translateX(-50%);
+        transform: translateX(calc(-100% / 2));
     }
 }