网页中的WHITESPACE

Question

我的网站有问题，屏幕右侧的img和文本之间有空白背景，请看一下屏幕截图以了解我的意思，我将提供代码以查看我是否确实在输入错误我对该网站进行编程的代码我使用bootstrap在移动设备上进行响应，但是您在屏幕截图中看到的却不是。我该如何解决这个问题，有人可以解决吗？我尝试使用d-block引导，但仍然显示空白。

HTML

.myimg {
  position: absolute;
  top: 60em;
  left: 60em;
  width: 100%;
  height: auto;
}

.myimg2 {
  border-radius: 100%;
  width: 35%;
}

.name {
  position: absolute;
  top: 37em;
  left: 23em;
  color: azure;
  text-shadow: 2px 2px 2px black;
}

.mytext {
  position: absolute;
  top: 48em;
  color: wheat;
  text-shadow: 2px 2px 2px black;
}

<div id="aboutMe">
  <img src="Images/background.jpg" width="1920" height="1080" alt="bg">
  <div class="aboutMeContent ">
    <div class="container">
      <div class="row">
        <div class="myimg">
          <img src="Images/me.jpg" alt="me" class="myimg2">
        </div>
        <h1 class="name">Stefan Momcilovic</h1>
        <h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
      </div>
    </div>
  </div>
</div>

Answer 1

解决方案是将CSS left属性设置为0，以使HTMLElement的左侧和页面之间没有间隙。

.myimg {
  position: absolute;
  top: 60em;
  left: 0;
  width: 100%;
  height: auto;
}

.myimg2 {
  border-radius: 100%;
  width: 35%;
}

.name {
  position: absolute;
  top: 37em;
  left: 0;
 
  color: azure;
  text-shadow: 2px 2px 2px black;
}

.mytext {
  position: absolute;
  top: 48em;
  left: 0;
  color: wheat;
  text-shadow: 2px 2px 2px black;
}

<div id="aboutMe">
  <img src="Images/background.jpg" width="1920" height="1080" alt="bg">
  <div class="aboutMeContent ">
    <div class="container">
      <div class="row">
        <div class="myimg">
          <img src="Images/me.jpg" alt="me" class="myimg2">
        </div>
        <h1 class="name">Stefan Momcilovic</h1>
        <h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
      </div>
    </div>
  </div>
</div>

Answer 2

1-如果要制作响应页面并改进代码，则绝对位置不适合响应页面。

2-使用绝对位置时，请考虑父节点的相对位置以及父节点的盒模型；

对于您的问题，如果您删除左侧或分配左侧：0，则消除了溢出-x。

例如：

.myimg {
  position: absolute;
  top: 0;
  text-align:center;
  width: 100%;
  height: auto;
}