网站右侧的文本没有响应和白色补丁

Question

我正在使用 stratch 构建我的第一个合适的网站，我一直在使用你们的一些回复，这些回复真的很有帮助，所以感谢大家:)

我只是有一个问题，但以后可能会有更多问题。

我希望网站能够响应并且我已经放置了视点代码，但是文本本身没有响应，因此，当您缩小屏幕尺寸时，右侧会出现一个白色补丁不应该存在的页面。我想知道是否有人可以帮我找出我的代码有什么问题。

谢谢！

/* Text properties */
body {
    font-family: 'Futura', sans-serif;
  margin: 0;
  padding: 0;
  font-size: 10px;
}
h1 {
  position: relative;
  left:70vw;
  top:30vh;
  text-align: right;
  font-size: 3em;
  color: white
}
h2 {
    font-family: 'Roboto', sans-serif;
  position: relative;
  left:70vw;
  top:28vh;
  text-align: right;
  font-size: 2em;
  color: white
}
h3 {
  position: relative;
  left:70vw;
  top:28vh;
  text-align: right;
  font-size: 14px;
  color: white
}
h4 {
  position: relative;
  font-family: 'Arial';
  left:70vw;
  top:27vh;
  text-align: right;
  font-size: 14px;
  color: white
}
a {
  color: #FFFFFF;
}
p {
  margin: 0;
  padding: 0;
}
.bg {
  /* The image used */
  background-image: url("https://eskipaper.com/images/dark-background-4.jpg");

  /* Full height */
  height: 96vh;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
  #title
  {
position: absolute;
  }
.footer p
{
  padding-top: 6px;
  font-size: 12px;
}
.footer {
  margin: 0px;
  Height:30px;
  width:100%;
  background-color: black;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="chrome=1">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
      <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
      <link href="C:\Users\Tola\Documents\Tola Photography\Landing Page\style.css" rel="stylesheet">
      <title>Tola Akindipe</title>
  </head>
<body>
  <div class="bg">
    <div id="title">
  <h1>Tola Akindipe</h1>
   <h2>Photography</h2>
    <h3><a href="/TolaMobile"style="text-decoration: none;" >Mobile Portfolio&nbsp;&nbsp;</a> <a href="/TolaDSLR"style="text-decoration: none;" >&nbsp;&nbsp;DSLR Portfolio</a></h3>
      <h4><a href="/contact" style="text-decoration: none;" >Contact</a></h4>
      </div>
    </div>
  <div class="footer">
    <p>Copyright 2020 @ Tola Akindipe - All Rights Reserved</p>
  </div>
  </body>
</html>

Answer 1

尝试将您的 CSS 更改为：

/* Text properties */
body {
    font-family: 'Futura', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 10px;

    height: 100%;
    width: 100%;
}

h1 {
    text-align: right;
    font-size: 3em;
    color: white
}

h2 {
    font-family: 'Roboto', sans-serif;
    text-align: right;
    font-size: 2em;
    color: white
}

h3 {
    text-align: right;
    font-size: 14px;
    color: white
}

h4 {
    font-family: 'Arial';
    text-align: right;
    font-size: 14px;
    color: white
}

a {
    color: #FFFFFF;
}

p {
    margin: 0;
    padding: 0;
}

.bg {
    /* The image used */
    background: url("https://eskipaper.com/images/dark-background-4.jpg") center center no-repeat;

    /* Screen Height - Footer Height */
    height: calc(100vh - 30px);

    /* Set The Background Size */
    background-size: cover;

    /* Align The Content To The Center */
    display: flex;
    justify-content: center;
    align-items: center;
}


.footer p {
    padding-top: 6px;
    font-size: 12px;
}

.footer {
    margin: 0px;
    Height: 30px;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
}

网站右侧的文本没有响应和白色补丁

Text not responsive and white patch on right side of website

html

css

text

responsive