diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index c3188169..ccb42a7d 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -38,7 +38,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
   const date = formatDate(post?.date?.start_date || post.createdTime, locale.LOCALE)
 
   return (<>
-      <div id="article-wrapper" ref={targetRef} className="flex-grow max-w-5xl mx-auto w-screen md:w-full ">
+      <div id="article-wrapper" ref={targetRef} className="overflow-x-auto flex-grow max-w-5xl mx-auto w-screen md:w-full ">
           <article itemScope itemType="https://schema.org/Movie"
             className="shadow md:hover:shadow-2xl duration-300 subpixel-antialiased py-10 px-5 lg:pt-24 md:px-24 xl:px-32 dark:border-gray-700 bg-white dark:bg-gray-800"
           >
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 426313b4..9142215a 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -57,7 +57,7 @@ const BaseLayout = ({
           <aside id='left' className='hidden lg:block flex-col w-60 mr-4'>
             <SideAreaLeft targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
           </aside>
-          <section id='center' className='flex-grow mt-14 md:mt-0 max-w-4xl min-h-screen overflow-x-auto' ref={targetRef}>
+          <section id='center' className='flex-grow mt-14 md:mt-0 max-w-4xl min-h-screen' ref={targetRef}>
             {onLoading
               ? <LoadingCover/>
               : <>