Casper social icons problem in mobile

Themes
1

I sincerely hope this is the right forum! I want my social icons to be horizontal in the mobile size, but I can’t get it to work at all. Can you please take a look at the code and see if I’ve missed something

/*Sociala ikoner DESKTOP*/    
.gh-head-menu .nav-facebook a,
.gh-head-menu .nav-github a,
.gh-head-menu .nav-instagram a,
.gh-head-menu .nav-mastodon a,
.gh-head-menu .nav-tiktok a,
.gh-head-menu .nav-reddit a,    
.gh-head-menu .nav-twitter a {
  font-size: 0 !important;
}
.gh-head-menu .nav-facebook a::before,
.gh-head-menu .nav-github a::before,
.gh-head-menu .nav-instagram a::before,
.gh-head-menu .nav-mastodon a::before,
.gh-head-menu .nav-tiktok a::before,
.gh-head-menu .nav-reddit a::before,    
.gh-head-menu .nav-twitter a::before {
  font-family: "Font Awesome 6 Brands";
  display: inline-block;
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.gh-head-menu .nav-facebook a::before {
  content: "\f09a";
  color: #1773ea;
}
.gh-head-menu .nav-github a::before {
  content: "\f09b";
}
.gh-head-menu .nav-instagram a::before {
  content: "\f16d";
  color: #ee8732;
}
.gh-head-menu .nav-mastodon a::before {
  content: "\f4f6";
  color: #5c4fe5;
}
.gh-head-menu .nav-tiktok a::before {
  content: "\e07b";
}
.gh-head-menu .nav-twitter a::before {
  content: "\f099";
}

.gh-head-menu .nav-reddit a::before {
  content: "\f1a1";
  color: #ff4500;
}
/*MOBIL ANPASSAD | MOBILE SIZE */
@media (max-width: 767px) {
  .gh-head-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .gh-head-menu li {
    margin: 0 10px;
    font-size: 0;
  }
  .gh-head-menu li a:before {
    font-family: "Font Awesome 6 Brands";
    display: inline-block;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
  .gh-head-menu .nav-facebook a::before {
    content: "\f09a";
    color: #1773ea;
  }
  .gh-head-menu .nav-github a::before {
    content: "\f09b";
  }
  .gh-head-menu .nav-instagram a::before {
    content: "\f16d";
    color: #ee8732;
  }
  .gh-head-menu .nav-mastodon a::before {
    content: "\f4f6";
    color: #5c4fe5;
  }
  .gh-head-menu .nav-tiktok a::before {
    content: "\e07b";
  }
  .gh-head-menu .nav-twitter a::before {
    content: "\f099";
  }
  .gh-head-menu .nav-reddit a::before {
    content: "\f1a1";
    color: #ff4500;
  }
}

Thank you in advance.

2

Skärmdump 2023-04-27, 15.32.14|231x500