网格在实时站点上延伸但不在本地文件上

Question

当我将完全相同的文件从我的计算机上传到托管我网站的服务器时，网站上的网格似乎被拉长了。它的意思是看起来像。 { https://imgur.com/a/pGyHAkB } 是 link 显示，这是我现有的代码。

我已经尝试将填充更改为边距，但我仍然遇到这个问题，我是 HTML 和 CSS 的新手，目前这是一个很大的障碍。

:root {
    --typewriterSpeed: 4200ms;
    --typewriterCharacters: 20;
  }
  
  body {
    margin: 0;
    font-family: "Inter", sans-serif;
    min-height: 100vh;
    display: grid;
    place-content: center;
    text-align: center;
    background: rgb(245, 245, 245);
  }
  
  h1 {
    font-size: clamp(1rem, 3vw + 1rem, 4rem);
    position: relative;
    font-family: "Inter", monospace;
    position: relative;
    width: max-content;
  }
  
  h1::before,
  h1::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  h1::before {
    background: rgb(245, 245, 245);
    animation: typewriter var(--typewriterSpeed)
      steps(var(--typewriterCharacters)) 1s forwards;
  }
  
  h1::after {
    width: 0.125em;
    background: black;
    animation: typewriter var(--typewriterSpeed)
        steps(var(--typewriterCharacters)) 1s forwards,
      blink 750ms steps(var(--typewriterCharacters)) infinite;
  }
  
  .subtitle {
    color: hsl(0 0% 0% / 0.7);
    font-size: 2rem;
    opacity: 0;
    transform: translateY(3rem);
    animation: fadeInUp 3s ease calc(var(--typewriterSpeed) + 2s) forwards;
  }
  
  @keyframes typewriter {
    to {
      left: 100%;
    }
  }
  
  @keyframes blink {
    to {
      background: transparent;
    }
  }
  
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

.navigation {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.9fr 0.9fr 1.2fr;
    gap: 1em 1em;
    grid-auto-flow: row;
    grid-template-areas:
    "nav nav nav";
    color: black;
    margin-top: 1rem;
    z-index: 1;
  }
  
.nav { 
    grid-area: nav; 
    color: black;
}

.nav a {
    color: black;
}
  


.container {  
    margin-top: -12rem;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1.2fr;
    grid-template-rows: 1.1fr 0.8fr;
    gap: 1em 1em;
    grid-auto-flow: row;
    grid-template-areas:
      "about about goals"
      "contact photo goals";
    font-family: Inter, Serif;
    padding-right: 24rem;
    padding-left: 24rem;
    padding-top: 10rem;
    padding-bottom: 5rem;
    color: white;
}

.about { 
      grid-area: about; 
      border-radius: 1rem;
      background-image: linear-gradient(to bottom right, #64e8de, #8a64eb);
      padding: 2rem;
      text-align: center;
      box-shadow:0px 0px 45px rgba(198, 55, 211, 0.15);
}
  
.goals { 
    grid-area: goals; 
    border-radius: 1rem;
    background-image: linear-gradient(to bottom right, #78f2e9, #b65eba);
    padding: 2rem;
    box-shadow:0px 0px 45px rgba(42, 160, 196, 0.15);
}
  
.contact { 
    grid-area: contact;
    border-radius: 1rem;
    background-image: linear-gradient(to bottom right, #6ee2f5, #6454f0);
    padding: 2rem;
    box-shadow:0px 0px 45px rgba(175, 26, 150, 0.15);
    text-align: left;
}

.contact .contact-info {
    list-style-type: none;
}
  
.photo { 
    grid-area: photo; 
    border-radius: 1rem;
    background-image: linear-gradient(to bottom right, #3499ff, #3a3985);
    padding: 2rem;
      box-shadow:0px 0px 45px rgba(56, 149, 255, 0.15);
}

.photo img{
  width: 80%;
  margin: 0 auto;
  display: grid;
  align-items: center;
  justify-content: center;
  margin-top: 25%;
}

<!DOCTYPE html>
<html>
    <head>
        <title>SkiesLearns</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://rsms.me/inter/inter.css" rel="stylesheet">
    </head>
    <body style="background-color: rgb(245, 245, 245);">
        <div>
            <header>
                <center>
                    <h1>Hey, my name is Max.</h1>
                </center>
                <p class="subtitle">welcome to my site</p>
            </header>
        </div>
        <div class="navigation">
            <div class="nav">
                <nav>
                    <a href="index.html">home</a>
                    <a href="projects.html">projects</a>
                    <a href="updates.html">updates</a>
                </nav>
            </div>
          </div>
        <div class="container">
            <div class="about">
                <h2 align="center">About</h2>
                <p>
                    I am a 19 year old who always has had a passion for technology.  From a young age I was interested in digital 
                    arts and that was my income as a 13 year old, as time went on I became very interested in Cyber Security. 
                    While progressing through courses I felt that if I wanted to progress in Cyber Security I would want to know 
                    how a program is developed (the code behind it) which has led me to start programming… which led me to falling 
                    in love with writing  code!  
                </p>
            </div>
            <div class="goals">
                <h2 align="center">Goals</h2>
                <h3 align="left">2022</h3>
                <p align="left">
                    For 2022 I aim to greatly expand my knowledge with frontend and backend languages. With current experience in 
                    HTML, CSS, Python, SQL and PowerShell I plan to learn JS, Java and React. I want to greater my understanding
                    with the languages I currently know and then continue my path on learning more languages.
                <h3 align="left">General</h3>
                <p align="left">
                    I plan to better myself in as many ways possible, mentally, phsyically and improve my cognative capabilities.
                    I am aiming high for my future and on route to succeed with my goals, step by step I am getting to where
                    I need to be. Hard work and determination is key.
                </p>
                </p>
            </div>
            <div class="contact">
                <h2>Contact</h2>
                <div>
                    <ul class="contact-info">
                        <li>max@skieslearns.com</li>
                        <li>+44 7746523323</li>
                    </ul>
                </div>
            </div>
            <div class="photo">
                <img src="./photos/skies-white.png" alt="my logo">
            </div>
          </div>
    </body>
</html>

Answer 1

尝试添加

.container {
  max-width: 1200px;
  margin: -12rem auto 0;
}

Answer 2

不要使用较大的填充值来定位元素。这在进行响应式设计时会很麻烦，并且会导致溢出问题。而只是使用 margin: auto; 作为替代。然后你可以添加一个 max-width 到你的容器上，这样它就不会拉伸整个屏幕的宽度。

我还添加了一个示例媒体查询，用于选择您可以在移动设备上为布局执行的操作。

:root {
  --typewriterSpeed: 4200ms;
  --typewriterCharacters: 20;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgb(245, 245, 245);
}

h1 {
  font-size: clamp(1rem, 3vw + 1rem, 4rem);
  position: relative;
  font-family: "Inter", monospace;
  position: relative;
  width: max-content;
}

h1::before,
h1::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

h1::before {
  background: rgb(245, 245, 245);
  animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards;
}

h1::after {
  width: 0.125em;
  background: black;
  animation: typewriter var(--typewriterSpeed) steps(var(--typewriterCharacters)) 1s forwards, blink 750ms steps(var(--typewriterCharacters)) infinite;
}

.subtitle {
  color: hsl(0 0% 0% / 0.7);
  font-size: 2rem;
  opacity: 0;
  transform: translateY(3rem);
  animation: fadeInUp 3s ease calc(var(--typewriterSpeed) + 2s) forwards;
}

@keyframes typewriter {
  to {
    left: 100%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.navigation {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.9fr 0.9fr 1.2fr;
  gap: 1em 1em;
  grid-auto-flow: row;
  grid-template-areas: "nav nav nav";
  color: black;
  margin-top: 1rem;
  z-index: 1;
}

.nav {
  grid-area: nav;
  color: black;
}

.nav a {
  color: black;
}

.container {
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.2fr;
  grid-template-rows: 1.1fr 0.8fr;
  gap: 1em 1em;
  grid-auto-flow: row;
  grid-template-areas: "about about goals" "contact photo goals";
  font-family: Inter, Serif;
  color: white;
  max-width: 1200px;
}

@media only screen and (max-width: 800px) {
  .container {
    display: block;
    margin: 0 1em;
  }
  
  .container > div {
    margin: 1em 0;
  }
}

.about {
  grid-area: about;
  border-radius: 1rem;
  background-image: linear-gradient(to bottom right, #64e8de, #8a64eb);
  padding: 2rem;
  text-align: center;
  box-shadow: 0px 0px 45px rgba(198, 55, 211, 0.15);
}

.goals {
  grid-area: goals;
  border-radius: 1rem;
  background-image: linear-gradient(to bottom right, #78f2e9, #b65eba);
  padding: 2rem;
  box-shadow: 0px 0px 45px rgba(42, 160, 196, 0.15);
}

.contact {
  grid-area: contact;
  border-radius: 1rem;
  background-image: linear-gradient(to bottom right, #6ee2f5, #6454f0);
  padding: 2rem;
  box-shadow: 0px 0px 45px rgba(175, 26, 150, 0.15);
  text-align: left;
}

.contact .contact-info {
  list-style-type: none;
}

.photo {
  grid-area: photo;
  border-radius: 1rem;
  background-image: linear-gradient(to bottom right, #3499ff, #3a3985);
  padding: 2rem;
  box-shadow: 0px 0px 45px rgba(56, 149, 255, 0.15);
}

.photo img {
  width: 80%;
  margin: 0 auto;
  display: grid;
  align-items: center;
  justify-content: center;
  margin-top: 25%;
}

<!DOCTYPE html>
<html>

<head>
  <title>SkiesLearns</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://rsms.me/inter/inter.css" rel="stylesheet">
</head>

<body style="background-color: rgb(245, 245, 245);">
  <div>
    <header>
      <center>
        <h1>Hey, my name is Max.</h1>
      </center>
      <p class="subtitle">welcome to my site</p>
    </header>
  </div>
  <div class="navigation">
    <div class="nav">
      <nav>
        <a href="index.html">home</a>
        <a href="projects.html">projects</a>
        <a href="updates.html">updates</a>
      </nav>
    </div>
  </div>
  <div class="container">
    <div class="about">
      <h2 align="center">About</h2>
      <p>
        I am a 19 year old who always has had a passion for technology. From a young age I was interested in digital arts and that was my income as a 13 year old, as time went on I became very interested in Cyber Security. While progressing through courses I
        felt that if I wanted to progress in Cyber Security I would want to know how a program is developed (the code behind it) which has led me to start programming… which led me to falling in love with writing code!
      </p>
    </div>
    <div class="goals">
      <h2 align="center">Goals</h2>
      <h3 align="left">2022</h3>
      <p align="left">
        For 2022 I aim to greatly expand my knowledge with frontend and backend languages. With current experience in HTML, CSS, Python, SQL and PowerShell I plan to learn JS, Java and React. I want to greater my understanding with the languages I currently know
        and then continue my path on learning more languages.
        <h3 align="left">General</h3>
        <p align="left">
          I plan to better myself in as many ways possible, mentally, phsyically and improve my cognative capabilities. I am aiming high for my future and on route to succeed with my goals, step by step I am getting to where I need to be. Hard work and determination
          is key.
        </p>
    </div>
    <div class="contact">
      <h2>Contact</h2>
      <div>
        <ul class="contact-info">
          <li>max@skieslearns.com</li>
          <li>+44 7746523323</li>
        </ul>
      </div>
    </div>
    <div class="photo">
      <img src="./photos/skies-white.png" alt="my logo">
    </div>
  </div>
</body>

</html>

网格在实时站点上延伸但不在本地文件上

Grids stretch out on live site but doesn't on a local file

html

css

css-grid