Add the content's horizontal padding for card components.

lib/decentralised_book_index_web/components/my_components/author_card.ex

@@ -63,7 +63,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.AuthorCard do
           </div>
         </div>
       <% end %>
-      <div class="flex flex-col items-center py-5 text-center">
+      <div class="flex flex-col items-center py-5 text-center px-2">
         <.link navigate={~p"/authors/#{@author.id}"}>
           <%= if @author.avatar_url != nil do %>
             <img

lib/decentralised_book_index_web/components/my_components/book_card.ex

@@ -63,7 +63,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookCard do
           </div>
         </div>
       <% end %>
-      <div class="flex flex-col items-center py-5 text-center">
+      <div class="flex flex-col items-center py-5 text-center px-2">
         <.link navigate={~p"/books/#{@book.id}"}>
           <%= if @book.cover_image_url != nil do %>
             <img class="w-36 mb-3 shadow-lg" src={@book.cover_image_url} alt={"#{@book.title} image"} />