First published site, fixed formating

src/components/Friendbutton.astro

@@ -8,7 +8,7 @@ const { website, image, name }=Astro.props
 
 <style>
 .image{border-radius: 100%;
- width: 8%;
+ width: 6%;
  }
  a{text-decoration: none;}
  .image:hover {

src/components/friends.astro

@@ -3,9 +3,9 @@ import FriendButton from "../components/Friendbutton.astro"
 ---
 <section id="Friends">
     <h2>Friends Sites!</h2>
-    <span>
+    <span class="friends">
         <FriendButton website="https://ashleygraves.eu/" image="https://dp.nea.moe/avatar/836177139798638592.png" title="Ashley"/>
-        <FriendButton website=" https://pandaptable.moe" image="/public/nemmy.gif" title="Nemmy"/>
+        <FriendButton website=" https://pandaptable.moe" image="/nemmy.gif" title="Nemmy"/>
        <FriendButton website="https://tiramisu.gay/" image=" https://dp.nea.moe/avatar/1215758862444007465.png" title="Tiramisu"/>
        <FriendButton website="Https://vendicated.dev/" image=" https://dp.nea.moe/avatar/343383572805058560.png" title="Vee"/>
        <FriendButton website="https://zoey-on-github.github.io/" image=" https://dp.nea.moe/avatar/696593747353534544.png" title="Julie"/>
@@ -14,5 +14,13 @@ import FriendButton from "../components/Friendbutton.astro"
        <FriendButton website="https://exhq.dev" image=" https://dp.nea.moe/avatar/712639419785412668.png" title="Echo"/>
        <FriendButton website=" https://instellate.xyz/" image=" https://dp.nea.moe/avatar/565197576026980365.png" title="Instellate"/>
        <FriendButton website=" https://blahai.gay/" image=" https://dp.nea.moe/avatar/381494697073573899.png" title="blahai"/>
+       <FriendButton website=" https://f53.dev/" image=" https://dp.nea.moe/avatar/280411966126948353.png" title="F53"/>
     </span>
-</section>
+</section>
+<style>
+    .friends {margin:17rem;
+Display: flex
+Flex wrap: wrap
+Justify content: center
+Gap: 0.5rem}
+</style>

src/components/navbutton.svelte

@@ -17,5 +17,5 @@
  .navbutton {
 	
  }
- .fri
+ 
 </style>