个人作品集网站多浏览器/屏幕尺寸显示异常 移动端适配问题求助

说真的我现在心如刀绞，只想缩成一团窝在床上哭，说不定我根本就不该来发这个求助。我为这个网站的设计和开发拼尽了全力，之前我为它骄傲到很久都没这么开心过，可现实不是迪士尼童话，所有美好预期全摔得粉碎。

• 我是高功能自闭症患者，成长在非常糟糕的原生家庭，从小就要照顾母亲，父亲有家暴倾向，家境贫寒，我从8岁起就同时打3份工负担家用、缴纳各类账单。
• 目前母亲刚过世，我正努力重整生活，想要逃离有家暴倾向的父亲。我负担不起大学学费，所谓“申请奖学金和助学金就行”的说法对我而言完全不切实际，也上不起编程训练营，请不起导师，全靠YouTube、谷歌搜索和大量阅读自学编程。
• 经过近两年的学习、数月的设计、数月的编码调试和调研，我终于完成了自己的作品集网站。我看着自己的作品，买了域名就上线了。正当我以为人生即将迎来转机，准备好投递新工作的时候，才发现我的网站只在MacBook Air的Chrome浏览器上显示完美，其他浏览器、不同尺寸屏幕下显示效果都不一致，存在移动端适配问题。我刚问自己“这是天堂吗”，现实就直接把我打回原形。我现在就像我妈吐槽我前任的厨艺那样——糟透了。
• 以下是我的代码，恳请大家不要过分苛责我，我已经尽了最大努力了。

站点域名 #

arthurcurry.co.uk

没错这是我的真名，我知道我妈是照着谁给我取的这个名字，我也结合了这个名字和我对海洋鱼类的热爱来做这个网站，麻烦大家不要开相关的玩笑，我这辈子听够了。如果你不知道我在说什么，恭喜你是全球那0.01%不会拿这个调侃我的人。

CSS代码 #

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

.pimg1,
.pimg2,
.pimg3 {
  position: relative;
  opacity: 0.70;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.pimg1 {
  min-height: 100%;
}

.pimg2 {
  min-height: 400px;
}

.pimg3 {
  min-height: 400px;
}

.pimg4 {
  background-image: url('image4.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100%;
}

.section {
  text-align: center;
  padding: 50px 80px;
}

.section-light {
  background-color: #f4f4f4;
  color: #666;
}

.section-dark {
  background-color: #282e34;
  color: #ddd;
}

.ptext {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 27px;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.ptext .border {
  background-color: #111;
  color: #fff;
  padding: 20px;
}

.ptext .border.trans {
  background-color: transparent;
}

@media(max-width:568px) {
  .pimg1,
  .pimg2,
  .pimg3 {
    background-attachment: scroll;
  }
}

.info {
  position: center;
}

.ptext4 {
  position: absolute;
  top: 450%;
  width: 100%;
  text-align: center;
  color: #000;
  font-size: 27px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.ptext4 .border {
  background-color: #111;
  color: #fff;
  padding: 20px;
}

.ptext4 .border.trans {
  background-color: transparent;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Arthur Curry</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="pimg1">
    <video autoplay muted loop>
    <source src="waves1.mp4" type="video/mp4" class="video1">
  </video>
    <div class="ptext">
      <span class="border">
        Designer. Developer. Conservationist.
      </span>
      <p>"What could be greater than a King? A Hero. A King fights for his nation, a hero fights for everyone." <strong> - Mera</strong></p>
    </div>
  </div>

  <section class="section section-light">
    <div class="text">
      <h2> Who is Arthur Curry? </h2>
      <p>
        Many know his name but even more do not know who he truly is. Ever since Arthur Curry was a child, he felt himself drawn to the 7 seas and her despair as if she was physically calling to him. With the incapability to escape the grasp of her cries for
        help, he knew something must be done. In 2016 he began teaching himself to code using numerous programming languages, text editors, design and developing platforms. Through his work he has made it his life mission to not just design and develop
        but to use his skills for good towards conservation. Many have come to him for advice and have called him a living computer, constantly learning, adapting and solving problems many find challenging.

      </p>
    </div>
  </section>

  <div class="pimg2">
    <video autoplay muted loop>
    <source src="pimg2.mp4" type="video/mp4">
  </video>
    <div class="ptext">
      <span class="border trans">
        Did you know that in 2020 Ocean Cleanup broke world record using technolgy to collect <strong><i>103 tons of plastic</strong></i>!
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Design Tools</h2>
    <p>
      Pen & Paper, Sketch pad, Webflow, Apple Mac, photography/videography camera, dive gear, Microsoft Office, Adobe Photoshop, Adobe Lightroom, & Adobe Animate.
    </p>
  </section>

  <div class="pimg3">
    <video autoplay muted loop>
    <source src="pimg3.mp4" type="video/mp4">
  </video>
    <div class="ptext">
      <span class="border trans">
        Did you know that because of technology, scientist are using biorock which gives coral reefs a 1600% to 5000% higher chance of survival?
      </span>
    </div>
  </div>

  <section class="section section-dark">
    <h2>Developer Tools</h2>
    <p>
      Github, HTML, CSS, PHP, Python, JS, Sublime Text Editor, Visual Code Text Editor, & Bootstrap.
    </p>
  </section>

  <div class="pimg4">
    <div class="ptext4">
      <span class="border trans">
        <ul>
        <li>Would you like to know more about becoming a true conservationist?</li>
        <br>
        <li>(website coming soon)</li>
        <br>
        <li><strong><i>ACurry.Business@gmail.com</i></strong></li>
      </span>
      <a href="http://open.spotify.com/user/q77rp6h9ot83qjk8r9xxg63hn" target="_blank">

        <img src="spotify.png" class="spotify">

      </a>
      <a href="https://www.linkedin.com/in/arthurcurry/" target="_blank">

        <img src="linkedin.png" class="linkedin">

      </a>
      <a href="https://www.instagram.com/oceanic_conservationist/" target="_blank">

        <img src="instagram.png" class="instagram">

      </a>

    </div>
  </div>
</body>

</html>

内容的提问来源于stack exchange，提问作者Arthur Curry