diff --git a/src/app/[userScreenName]/edit/page.tsx b/src/app/[userScreenName]/edit/page.tsx
index 07bbf94..f075c4f 100644
--- a/src/app/[userScreenName]/edit/page.tsx
+++ b/src/app/[userScreenName]/edit/page.tsx
@@ -17,7 +17,7 @@ export default async function Page({
   if (session.user.id !== user.id) notFound();
 
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1 className="text-center">{user.name}のプロフィールを編集</h1>
       <EditForm user={user} />
       <DeleteUserLink />
diff --git a/src/app/[userScreenName]/page.tsx b/src/app/[userScreenName]/page.tsx
index c9de67c..6625fcc 100644
--- a/src/app/[userScreenName]/page.tsx
+++ b/src/app/[userScreenName]/page.tsx
@@ -43,7 +43,7 @@ export default async function Page({
   const socials = user.avatars.map((avatar) => avatar.social).sort(compare);
   const posts = await api.post.getAllByUserId(user.id);
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <div className="not-prose avatar">
         <div className="w-24 rounded-full">
           <Image
diff --git a/src/app/_components/post-detail-or-edit-frame.tsx b/src/app/_components/post-detail-or-edit-frame.tsx
index 0d80e0f..76b639e 100644
--- a/src/app/_components/post-detail-or-edit-frame.tsx
+++ b/src/app/_components/post-detail-or-edit-frame.tsx
@@ -21,7 +21,7 @@ export function PostDetailOrEditFrame({
   const avatarPath = `/socials/${post.createdBy.social.screenName}/${post.createdBy.user.screenName}`;
 
   return (
-    <div className="card mx-auto w-80 bg-base-100 shadow-xl sm:w-96">
+    <div className="card mx-auto w-full bg-base-100 shadow-xl">
       <div className="card-body">
         <div className="card-title">
           <Link href={avatarPath}>
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 6d01585..a8c4f26 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,6 +1,6 @@
 export default function Page() {
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1>Contact</h1>
     </div>
   );
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 056d669..340f234 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,6 +1,6 @@
 export default function NotFound() {
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1>404 Not Found</h1>
     </div>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9c6059b..6a025f4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -15,7 +15,7 @@ export default async function Page() {
   return session === null ? (
     <Hero />
   ) : (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       {user !== null && avatars !== null && avatars.length >= 1 ? (
         <Home user={user} avatars={avatars} />
       ) : (
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
index 614125a..5824614 100644
--- a/src/app/privacy-policy/page.tsx
+++ b/src/app/privacy-policy/page.tsx
@@ -6,7 +6,7 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1 className="text-center">プライバシーポリシー</h1>
       <p className="text-right">2024 年 6 月 2 日</p>
       <ol>
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index b0dcc5a..0c56f1c 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -33,7 +33,7 @@ export default async function Page({
       : await api.post.searchInCurrentSocial(q);
 
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <Posts posts={posts} />
     </div>
   );
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 32bd690..19b4ef7 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -7,7 +7,7 @@ export default async function Page() {
     return null;
   }
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1>サインアップ</h1>
       <SignupForm />
     </div>
diff --git a/src/app/socials/[screenName]/[avatarScreenName]/followers/page.tsx b/src/app/socials/[screenName]/[avatarScreenName]/followers/page.tsx
index a2cb421..afd1dee 100644
--- a/src/app/socials/[screenName]/[avatarScreenName]/followers/page.tsx
+++ b/src/app/socials/[screenName]/[avatarScreenName]/followers/page.tsx
@@ -44,7 +44,7 @@ export default async function Page({
           (loginAvatar) => loginAvatar.socialId === avatar.social.id,
         );
   return (
-    <div className="container prose mx-auto px-4">
+    <div className="container prose mx-auto">
       <h1>
         {avatar.user.name}（{avatar.user.screenName}.{avatar.social.screenName}
         ）さんのフォロワー
diff --git a/src/app/socials/[screenName]/[avatarScreenName]/following/page.tsx b/src/app/socials/[screenName]/[avatarScreenName]/following/page.tsx
index e757eba..26a5baa 100644
--- a/src/app/socials/[screenName]/[avatarScreenName]/following/page.tsx
+++ b/src/app/socials/[screenName]/[avatarScreenName]/following/page.tsx
@@ -44,7 +44,7 @@ export default async function Page({
           (loginAvatar) => loginAvatar.socialId === avatar.social.id,
         );
   return (
-    <div className="container prose mx-auto px-4">
+    <div className="container prose mx-auto">
       <h1>
         {avatar.user.name}（{avatar.user.screenName}.{avatar.social.screenName}
         ）さんがフォロー中
diff --git a/src/app/socials/[screenName]/[avatarScreenName]/page.tsx b/src/app/socials/[screenName]/[avatarScreenName]/page.tsx
index 6ddb33c..a302922 100644
--- a/src/app/socials/[screenName]/[avatarScreenName]/page.tsx
+++ b/src/app/socials/[screenName]/[avatarScreenName]/page.tsx
@@ -38,7 +38,7 @@ export default async function Page({
   const posts = avatar.posts.reverse();
 
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <div className="not-prose avatar">
         <div className="w-24 rounded-full">
           <Image
diff --git a/src/app/socials/[screenName]/[avatarScreenName]/posts/[postId]/page.tsx b/src/app/socials/[screenName]/[avatarScreenName]/posts/[postId]/page.tsx
index 2fdf38e..00c6b66 100644
--- a/src/app/socials/[screenName]/[avatarScreenName]/posts/[postId]/page.tsx
+++ b/src/app/socials/[screenName]/[avatarScreenName]/posts/[postId]/page.tsx
@@ -16,7 +16,7 @@ export default async function Page({
   if (post === null) notFound();
   const isAuthor = post.createdBy.userId === session.user.id;
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4 pt-5">
+    <div className="container prose mx-auto mb-10 mt-5">
       <PostDetailOrEdit post={post} isAuthor={isAuthor} />
     </div>
   );
diff --git a/src/app/socials/[screenName]/avatars/page.tsx b/src/app/socials/[screenName]/avatars/page.tsx
index 24ae893..0b224d7 100644
--- a/src/app/socials/[screenName]/avatars/page.tsx
+++ b/src/app/socials/[screenName]/avatars/page.tsx
@@ -34,7 +34,7 @@ export default async function Page({
       ? undefined
       : loginUser.avatars.find((avatar) => avatar.socialId === social.id);
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1 className="text-center">{social.name}のメンバー</h1>
       <Avatars avatars={social.avatars} loginAvatarId={loginAvatar?.id} />
     </div>
diff --git a/src/app/socials/[screenName]/page.tsx b/src/app/socials/[screenName]/page.tsx
index 445e34a..87221c7 100644
--- a/src/app/socials/[screenName]/page.tsx
+++ b/src/app/socials/[screenName]/page.tsx
@@ -32,7 +32,7 @@ export default async function Page({
   const avatar =
     user === null ? null : await api.avatar.getMyAvatarBySocialId(social.id);
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <SocialDetailOrEdit
         social={social}
         user={user}
diff --git a/src/app/socials/new/page.tsx b/src/app/socials/new/page.tsx
index 3d2ded6..788811c 100644
--- a/src/app/socials/new/page.tsx
+++ b/src/app/socials/new/page.tsx
@@ -2,7 +2,7 @@ import { CreateSocialForm } from "~/app/_components/socials/create-social-form";
 
 export default function Page() {
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1>ソーシャルを作成</h1>
       <CreateSocialForm />
     </div>
diff --git a/src/app/socials/page.tsx b/src/app/socials/page.tsx
index 5a82e3f..18148d9 100644
--- a/src/app/socials/page.tsx
+++ b/src/app/socials/page.tsx
@@ -13,7 +13,7 @@ export default async function Page() {
   const socials = await api.social.getAll();
   const avatars = await api.avatar.getMyAvatars();
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1 className="text-center">ソーシャル</h1>
       {session !== null && (
         <Link href="/socials/new" className="btn btn-primary">
diff --git a/src/app/terms-of-service/page.tsx b/src/app/terms-of-service/page.tsx
index 528c07d..0fd2c9c 100644
--- a/src/app/terms-of-service/page.tsx
+++ b/src/app/terms-of-service/page.tsx
@@ -6,7 +6,7 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1 className="text-center">利用規約</h1>
       <p className="text-right">2024 年 6 月 2 日</p>
       <ol>
diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
index 856b450..8ed4f22 100644
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
@@ -9,7 +9,7 @@ export const metadata: Metadata = {
 export default async function Page() {
   const users = await api.user.getAll();
   return (
-    <div className="container prose mx-auto mb-10 mt-5 px-4">
+    <div className="container prose mx-auto mb-10 mt-5">
       <h1 className="text-center">ユーザー</h1>
       <Users users={users} />
     </div>