我的网站出现问题，在移动设备上，空白呈现在 HTML 标签边框之外。该问题仅在移动设备上，当移动设备上的Chrome浏览器设置为移动设备上的桌面模式时，也会发生同样的事情。
初始加载移动
这就是网站最初在移动设备上加载的方式，但滚动远远超出了 HTML 标签的视口。
缩小
我不明白的是，如果客户端从纵向旋转到水平方向再向后旋转，网站会删除空格。 由于我在所有网页上使用相同的静态模板，因此问题在整个网站上仍然存在。
该网站是：Zefir.codes
网站使用：
- Animate (CSS Library(
- 布尔玛(CSS 库(
下面是静态网页的模板：
<html>
<head>
<title>A Hacker's world</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/index-min.css">
<link rel="stylesheet" href="css/animate.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section class="section">
<div class="container">
<a href="index.html"> <h1 class="title animated pulse">
Zefir Repository <img src="img/logo.png" width="150px" height="150px" align="right">
</h1>
<p class="subtitle animated bounceInRight">
A <strong>Hacker's</strong> World
</p>
</a>
</div>
</section>
<br/>
<div class="container is-widescreen">
<div class="tabs is-small animated lightSpeedIn">
<ul>
<li><a href="Tutorials.html">Tutorials</a></li>
<li><a href="Projects.html">Projects</a></li>
<li><a href="me.html">About me</a></li>
</ul>
</div>
</div>
<br/>
<!--Page Content-->
<div class="animated zoomIn">
<div class="container is-fluid">
<!--Column start-->
<div class="columns">
<!--first Column-->
<div class="column is-one-quarter">
</br>
<p class="title">
Updates
</p>
<!--Notify03-->
<div class="card">
<header class="card-header">
<p class="card-header-title">
A rebirth of the website!
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">
The website is coming back and strong!
<br>
<time datetime="2020-05-15">22:04 - 15 May 2020</time>
</div>
</div>
</div>
</div>
<!--second Column-->
<div class="column">
</br>
<p class="title">
News
</p>
<div class="card">
<header class="card-header">
<p class="card-header-title">No News
</p>
<a href="#" class="card-header-icon" aria-label="more options">
</a>
</header>
<div class="card-content">
<div class="content">...
<br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time>
</div>
</div>
</div> <div class="card">
<header class="card-header">
<p class="card-header-title">No news </p>
<a href="#" class="card-header-icon" aria-label="more options"> </a> </header>
<div class="card-content"> <div class="content">... <br>
<time datetime="2017-12-6">8:23 PM - 15 May 2020</time> </div> </div></div>
</div>
</div>
</div>
<!--End of Content-->
</br>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
Zefir Repository is a collection of projects and tutorials by <strong><a href="https://www.linkedin.com/in/typicaljohan/">Jan Andersson</a></strong> Hosted on <strong>Infinityfree</strong>.
</p>
</div>
</div>
</footer>
</div>
</body>
</html>
这样做是因为您的元素在动画开始之前被定位在右侧，并且浏览器会保留此空格。 要么更改动画，要么简单的解决方法是添加：
body {
overflow-x: hidden;
}
将overflow-hidden添加到您的网站正文中，希望这可以解决您的问题。