Docs: Try to fix shields container

Author: BornToBeRoot

Website/docs/introduction.md

@@ -18,42 +18,42 @@ Connect and manage remote systems with Remote Desktop, PowerShell, PuTTY, TigerV
 
 ![NETworkManager Preview](/img/preview.gif)
 
-<div>
+<div class="shieldsContainer">
   <p>
-    <a href="https://github.com/BornToBeroot/NETworkManager/releases" target="_blank">
+    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/releases" target="_blank">
       <img alt="All releases" src="https://img.shields.io/github/downloads/BornToBeroot/NETworkManager/total.svg?style=for-the-badge&logo=github" />
     </a>    
-    <a href="https://github.com/BornToBeroot/NETworkManager/releases/latest" target="_blank">
+    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/releases/latest" target="_blank">
       <img alt="Latest release" src="https://img.shields.io/github/downloads/BornToBeroot/NETworkManager/latest/total.svg?style=for-the-badge&logo=github" />
     </a>
-    <a href="https://github.com/BornToBeroot/NETworkManager/releases" target="_blank">
+    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/releases" target="_blank">
       <img alt="Latest pre-release" src="https://img.shields.io/github/downloads-pre/BornToBeroot/NETworkManager/latest/total.svg?label=downloads%40pre-release&style=for-the-badge&logo=github" />
     </a>
   </p>
   <p>
-    <a href="https://github.com/BornToBeroot/NETworkManager/stargazers" target="_blank">
+    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/stargazers" target="_blank">
       <img alt="GitHub stars" src="https://img.shields.io/github/stars/BornToBeroot/NETworkManager.svg?style=for-the-badge&logo=github" />
     </a>    
-    <a href="https://github.com/BornToBeroot/NETworkManager/network" target="_blank">       
+    <a class="shieldsLink" href="https://github.com/BornToBeroot/NETworkManager/network" target="_blank">       
       <img alt="GitHub forks" src="https://img.shields.io/github/forks/BornToBeroot/NETworkManager.svg?style=for-the-badge&logo=github" />
     </a>
   </p>
   <p> 
-    <a href="https://ci.appveyor.com/project/BornToBeRoot/NETworkManager/branch/main">
+    <a class="shieldsLink" href="https://ci.appveyor.com/project/BornToBeRoot/NETworkManager/branch/main">
       <img alt="AppVeyor" src="https://img.shields.io/appveyor/ci/BornToBeRoot/NETworkManager/main.svg?style=for-the-badge&logo=appveyor&&label=main" />
     </a>   
-    <a href="https://github.com/BornToBeRoot/NETworkManager/blob/main/LICENSE">
+    <a class="shieldsLink" href="https://github.com/BornToBeRoot/NETworkManager/blob/main/LICENSE">
       <img alt="AppVeyor" src="https://img.shields.io/github/license/BornToBeroot/NETworkManager.svg?style=for-the-badge&logo=github" />
     </a>     
   </p> 
   <p> 
-    <a href="https://transifex.com/BornToBeRoot/NETworkManager/">
+    <a class="shieldsLink" href="https://transifex.com/BornToBeRoot/NETworkManager/">
       <img alt="Transifex" src="https://img.shields.io/badge/transifex-translate-green.svg?style=for-the-badge" />
     </a>   
-    <a href="https://github.com/BornToBeRoot/NETworkManager/issues/new?labels=Feature-Request&template=Feature_request.md">
+    <a class="shieldsLink" href="https://github.com/BornToBeRoot/NETworkManager/issues/new?labels=Feature-Request&template=Feature_request.md">
       <img alt="Feature request" src="https://img.shields.io/badge/github-feature_request-green.svg?style=for-the-badge&logo=github" />
     </a>       
-    <a href="https://github.com/BornToBeRoot/NETworkManager/issues/new?labels=Issue&template=Bug_report.md">
+    <a class="shieldsLink" href="https://github.com/BornToBeRoot/NETworkManager/issues/new?labels=Issue&template=Bug_report.md">
       <img alt="Bug report" src="https://img.shields.io/badge/github-bug_report-red.svg?style=for-the-badge&logo=github" />
     </a>     
   </p> 

Website/src/pages/index.module.css

@@ -124,6 +124,15 @@ table {
   font-size: 24px;
 }
 
+.shieldsContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.shieldsLink {
+  margin: 0rem 2.5rem;
+}
+
 @media only screen and (max-width: 768px) {
   .hero {
     padding-left: 20px;