How to fix this horizontal scroll bar issue? - css

Question

On my main Mac machine (firefox, safari and chrome) my code tags “box” renders normally:
But, on my Windows (chrome/firefox, with different screen res) it shows this empty horizontal scroll bar:
I want the scroll bar to only show up when needed, like on Mac. I'm using this Hugo theme (live demo). Here’s my slightly modded .css (stripped of all colors and unimportant parts):
/* General Page Layout */
body {
margin: 0;
line-height: 1.5;
font-size: 100%;
font-family: 'Source Code Pro', monospace;
}
.container {
max-width: 52em;
margin-left: auto;
margin-right: auto;
}
div.right {
float:right;
}
div.clearfix {
overflow: auto;
}
#media (max-width: 52em) {
.container {
width: 100%;
}
}
article.single section,
.article-list article {
padding-left: 4rem;
padding-right: 4rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
#media (max-width: 52em) {
article.single section,
.article-list article {
padding-left: 2rem;
padding-right: 2rem;
}
}
header, footer {
padding-top: 1rem;
padding-bottom: 1rem;
}
header {
margin-top: 1rem;
margin-bottom: 2rem;
}
#media (max-width: 52em) {
header {
margin-top: 0;
padding-left: 2rem;
padding-right: 2rem;
}
}
footer {
margin-top: 2rem;
margin-bottom: 1rem;
text-align: center;
font-size: 0.9em;
}
#media (max-width: 52em) {
footer {
margin-top: 0;
margin-bottom: 0;
}
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
line-height: 1.25;
margin-top: 1em;
margin-bottom: .5em;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
h1 { font-size: 2rem }
h2 { font-size: 1.5rem }
h3 { font-size: 1.25rem }
h4 { font-size: 1rem }
h5 { font-size: .875rem }
h6 { font-size: .75rem }
#font-face {
font-family: 'Input';
src: url('/font/Input-Regular.woff2') format('woff2'),
url('/font/Input-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
pre, code {
font-family: 'Input', monospace;
font-size: inherit;
}
/* Homepage Layout */
#media (max-width: 52em) {
.homepage {
margin-bottom: 2rem;
}
}
.homepage h1.site-title {
text-align: center;
font-size: 5em;
}
#media (max-width: 52em) {
.homepage h1.site-title {
font-size: 3em;
}
}
.homepage h1.headline {
font-size: 3em;
}
#media (max-width: 52em) {
.homepage h1.headline {
padding-left: 2rem;
padding-right: 2rem;
}
}
.homepage .hero-logo img {
width: 100%;
}
.homepage section.categories,
.homepage section.tags {
padding-left: 2rem;
padding-right: 2rem;
}
.homepage .tag {
margin-right: 2em;
}
/* Post List Layout */
.article-list h1.list-title {
font-size: 3em;
}
.article-list article {
padding-top: 4rem;
padding-bottom: 4rem;
margin-bottom: 4rem;
}
.article-list article h2.headline,
.article-list article h2.headline a {
margin-top: 0;
}
.article-list article .meta {
margin-bottom: 1rem;
}
/* Single Post Layout */
article.single .meta {
font-size: 0.9em;
text-align: right;
}
#media (max-width: 52em) {
article.single .meta {
padding-left: 2rem;
padding-right: 2rem;
}
}
article.single h1.headline {
margin-top: 0;
font-size: 3em;
}
#media (max-width: 52em) {
article.single h1.headline {
padding-left: 2rem;
padding-right: 2rem;
}
}
article.single section.body {
padding-top: 4rem;
padding-bottom: 3rem;
}
#media (max-width: 52em) {
article.single section.body {
padding-top: 2rem;
padding-bottom: 1rem;
}
}
/* Article Elements */
article.single * {
max-width: 100%;
}
article.single pre {
margin-top: 0;
margin-bottom: 1rem;
overflow-x: scroll;
border-radius: 3px;
padding: 2rem;
}
article.single ul code, ol code, p code {
padding: 0em 0.1em;
border-radius: 3px;
}
article.single figure, article.single div.highlight {
box-sizing: border-box;
max-width: 46rem;
width: 46rem;
margin-left: -1rem;
margin-right: 0rem;
margin-bottom: 1rem;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 0.1em;
}
#media (max-width: 52em) {
article.single figure, article.single div.highlight {
width: 100%;
margin-left: 0;
margin-right: 0;
border-radius: 3px;
}
}

Answer 1

You can try :
pre, code {
font-family: 'Input', monospace;
font-size: inherit;
overflow: auto;
}

Answer 2

Solved by changing overflow-x from scroll to auto in article.single pre.

Answer 3

For me, it happened when I set the direction attribute rtl in <body> tag,
although there's no overflow on default mode (ltr), however, I set the dir attribute for the main div tag under the body, like the following:
<body dir="rtl">
<div>
... <!-- few pixels horizontal overflow -->
</div>
</body>
so the worked solution for me was:
<body>
<div dir="rtl">
... <!-- No horizontal overflow -->
</div>
</body>

Answer 4

It could be resolved as followed.
Please set also for all viewport breakpoints the desired width: % of the .container class.