diff --git a/docs/index.md b/docs/index.md
index 9d2d14a8f..828911c49 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -146,7 +146,7 @@ hide:
     <div style="margin-top: 2em; margin-bottom: 1em;">
       <img src="index.assets/hello_algo_header.png" style="width: 100%; max-width: 39em;">
     </div>
-    <div style="margin: 0.5em auto;">
+    <div class="code-badge">
       <img src="https://img.shields.io/badge/Python-snow?logo=python&logoColor=3776AB">
       <img src="https://img.shields.io/badge/C%2B%2B-snow?logo=c%2B%2B&logoColor=00599C">
       <img src="https://img.shields.io/badge/Java-snow?logo=coffeescript&logoColor=FC4C02">
diff --git a/overrides/stylesheets/extra.css b/overrides/stylesheets/extra.css
index 2a0f786a3..92af94360 100644
--- a/overrides/stylesheets/extra.css
+++ b/overrides/stylesheets/extra.css
@@ -288,6 +288,18 @@ a:hover .hero-caption {
   font-weight: bold;
 }
 
+/* code badge */
+.code-badge {
+  width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+
+.code-badge img {
+  height: 1.07em;
+  width: auto;
+}
+
 /* device */
 .device-on-hover {
   width: auto;