fix header logo css

Author: recursivezero

src/assets/styles/header.css

@@ -24,12 +24,13 @@
       height: 3rem;
     }
 
-    span {
+    p {
       font-size: 1.5rem;
       font-weight: 600;
+      margin-inline-start: 1rem;
       color: var(--primary);
 
-      & em {
+      & span {
         color: #6d8c3d;
       }
     }
@@ -39,10 +40,6 @@
     display: flex;
     align-items: center;
     text-decoration: none;
-
-    & span {
-      margin-inline: 1rem;
-    }
   }
 
   .title {

src/layouts/common/Header.astro

@@ -9,7 +9,7 @@ import logoImage from "/public/assets/images/48x48.png";
   <div class="header__brand">
     <a href="/" class="logo__link">
       <Picture src={logoImage} formats={["png", "webp"]} alt="abcdkbd logo" class="logo" />
-      <span title={APP_NAME}>abcd<em>kbd</em></span>
+      <p title={APP_NAME}>abcd<span class="kbd">kbd</span></p>
     </a>
   </div>
   <div class="title text__balance">Happy Learning Spot</div>