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

Question

在实现响应式设计时，我无法从右侧移除空白区域。我使用flex box来实现大部分布局。窗口响应准确，内容相应调整，但滚动时，右侧有空间！

类的层次结构：

---->容器

-------->侧边栏

---------------->名称专业

---------------->详情

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

-------->内容

HTML：

* {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background-color: #E5E6EA;
}

.container {
  display: flex;
  height: 100%;
}

@media screen and (max-width: 480px) {
  .container {
    flex-direction: column;
  }
}


/* Sidebar */

.sidebar {
  background-color: #FFF;
  flex: 1;
  margin-right: 20px;
  width: 400px;
  flex: initial;
}

@media screen and (max-width: 480px) {
  .sidebar {
    width: 100%;
    margin-bottom: 40px;
    margin-right: 0;
  }
}

.name-profession {
  background-color: #56b293;
  padding: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #fff;
}

.name {
  font-size: 40px;
  font-weight: bold;
}

.profession {
  font-size: 20px;
}

.details {
  padding: 40px;
}

@media screen and (max-width: 480px) {
  .details {
    width: 300px;
    margin: 0 auto;
    position: relative;
  }
  .contact-item {}
}

.contact {
  margin-bottom: 20px;
}

.contact-item {
  display: flex;
  width: 400px;
  margin-bottom: 20px;
}

.contact-text {
  margin-left: 10px;
  font-size: 15px;
}


/* End Sidebar */


/* Content */

.content {
  background-color: #fff;
  flex: 2;
}

@media screen and (max-width: 480px) {
  .content {
    width: 100%;
    margin-bottom: 40px;
  }
}


/* End Content */


/* Common */

.large-heading {
  font-size: 25px;
  text-transform: uppercase;
  font-weight: bold;
}

.heading {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
}

.content-text {
  color: grey;
}

.circle-avatar {
  width: 40px;
  height: 40px;
  background-color: #56b293;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-avatar img {
  width: 30px;
  height: 30px;
  padding: 5px;
}

.dotted-separator {
  border-top: 3px dashed #E5E6EA;
  width: 100%;
}

.content-padding {
  padding: 40px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="container">
  <!--Sidebar-->
  <div class="sidebar">
    <div class="name-profession">
      <p class="name">Gurleen Sethi</p>
      <p class="profession">Software Developer</p>
    </div>

    <div class="details">
      <p class="contact large-heading">Contact</p>
      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/home.png">
        </div>
        <div class="contact-text">
          <p class="heading">Address</p>
          <p class="content-text">948 New Geeta Colony</p>
        </div>
      </div>

      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/calendar.png">
        </div>
        <div class="contact-text">
          <p class="heading">DATE OF BIRTH</p>
          <p class="content-text">18 August 1996</p>
        </div>
      </div>

      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/phone.png">
        </div>
        <div class="contact-text">
          <p class="heading">Phone</p>
          <p class="content-text">[phone]</p>
        </div>
      </div>

      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/mail.png">
        </div>
        <div class="contact-text">
          <p class="heading">Email</p>
          <p class="content-text">[email protected]</p>
        </div>
      </div>

      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/world.png">
        </div>
        <div class="contact-text">
          <p class="heading">Website</p>
          <p class="content-text">www.thetechnocafe.com</p>
        </div>
      </div>
    </div>
  </div>

  <!--Content-->
  <div class="content">
    <div class="about content-padding">
      <p class="heading" style="margin-bottom: 20px;">About</p>
      <p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>

    <div class="dotted-separator"></div>
  </div>
</div>

Answer 1

你的.contact-item有宽度400px，在移动设备上创建水平空间。将它更改为width: 100%，它应该没问题。

Answer 2

在您的代码中，您使用了许多固定宽度，而应使用max-width替换它们并使用width:100%

所以如果你有：

width:(value)px;

做了：

max-width:(value)px;
width:100%;

Answer 3

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

替换此代码

@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;
  }
}