diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index d74d1ec24941..d85fb79a05a8 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -96,8 +96,13 @@
 }
 
 .masthead-notice {
+  padding-top: .45rem;
   background-color: var(--bd-accent);
   box-shadow: inset 0 -1px 1px rgba(var(--bs-body-color-rgb), .15), 0 .25rem 1.5rem rgba(var(--bs-body-bg-rgb), .75);
+
+  svg{
+    transform: translateY(.2rem);
+  }
 }
 
 .animate-img {
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index c16841d81856..77e343ebf664 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -2,7 +2,7 @@
   <div class="container-xxl bd-gutter">
     <div class="col-md-8 mx-auto text-center">
       <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://www.herodevs.com/support/nes-bootstrap?utm_source=Bootstrap_site&utm_medium=Banner&utm_campaign=v3and4_eol" rel="noopener" target="_blank">
-        <span class="d-sm-inline-flex align-items-center gap-1 py-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
+        <span class="pb-2 px-3 me-2 mb-2 mb-lg-0 rounded-5 masthead-notice">
           Get Security Updates for Bootstrap 3 &amp; 4
           <svg class="bi" style="width: 20px; height: 20px;" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg>
         </span>