无法删除响应设计HTML/CSS中右侧的空白

在实施响应式设计时，我无法删除右侧的空白。 我使用了flex-box来实现大部分布局。 窗口响应准确，内容也相应调整，但当滚动时，右边总是有空格

类的层次结构：

---->容器

-------->边栏

---------------->姓名职业

---------------->细节

------------------------>联系项目

-------->内容

HTML:

*{
保证金：0；
填充：0；
字体系列：Roboto；
框大小：边框框；
}
html，
身体{
身高：100%；
背景色：#E5E6EA；
}
.集装箱{
显示器：flex；
身高：100%；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.集装箱{
弯曲方向：立柱；
}
}
/*边栏*/
.侧边栏{
背景色：#FFF；
弹性：1；
右边距：20px；
宽度：400px；
flex：首字母；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.侧边栏{
宽度：100%；
边缘底部：40px；
右边距：0；
}
}
.姓名和职业{
背景色：#56b293；
填充：20px；
显示器：flex；
对齐项目：居中；
弯曲方向：立柱；
颜色：#fff；
}
.姓名{
字体大小：40px；
字体大小：粗体；
}
.职业{
字体大小：20px；
}
.详情{
填充：40px；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.详情{
宽度：300px；
保证金：0自动；
位置：相对位置；
}
.联系项目{}
}
.联系方式{
边缘底部：20px；
}
.联络项目{
显示器：flex；
宽度：400px；
边缘底部：20px；
}
.联系方式{
左边距：10px；
字体大小：15px；
}
/*端边栏*/
/*内容*/
.内容{
背景色：#fff；
弹性：2；
}
@媒体屏幕和屏幕（最大宽度：480px）{
.内容{
宽度：100%；
边缘底部：40px；
}
}
/*最终内容*/
/*普通的*/
.大标题{
字体大小：25px；
文本转换：大写；
字体大小：粗体；
}
.标题{
字体大小：20px；
文本转换：大写；
字体大小：粗体；
}
.内容文本{
颜色：灰色；
}
.圆圈化身{
宽度：40px；
高度：40px；
背景色：#56b293；
边界半径：50%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.circle阿凡达img{
宽度：30px；
高度：30px；
填充物：5px；
}
.点分隔符{
边框顶部：3个虚线#E5E6EA；
宽度：100%；
}
.内容填充{
填充：40px；
}

Gurleen Sethi

软件开发人员

联系
地址
948新吉塔殖民地

出生日期

1996年8月18日
电话

+91 72908 32506
电子邮件
contactgurleensethi@gmail.com
网站
www.thetechnocafe.com
关于

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变

您的

。联系人项目的宽度为
400px
，在手机上创建水平空间。将其更改为宽度：100%

，应该可以。

仅使用此代码媒体查询我认为此问题已解决

替换此代码

@media only screen and (max-width:480px) {
  .details {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  .sidebar {
    background-color: #FFF;
    margin-right: 0px;
    width: 100%;
    padding: 0 15px;
  }
}

---

如果您不需要在网站上进行水平滚动，请使用此简单的CSS来防止此问题

html{
  width: 100vw;
  overflow-x: hidden;
}

如果你想让它只影响移动设备，我建议你把它放在下面合适的@media块中

@media only screen and (max-width:480px) {
    html{
      width: 100vw;
      overflow-x: hidden;
    }
}

.div-class-name{
    width:100%;
}

如果有任何div显示不正确，可以将该div的宽度设置为100%，如下所示

@media only screen and (max-width:480px) {
    html{
      width: 100vw;
      overflow-x: hidden;
    }
}

.div-class-name{
    width:100%;
}