截圖示例。

每當我降低圖像的分辨率時，卡片不會隨著頁面變小。相反，它們只是停留在原地，從頁面中泄漏出來。我怎樣才能讓卡片像其他網站一樣隨著頁面變小？還有我怎么能讓卡片變得足夠小之后再去下一行呢？

@font-face {
    font-family: 'LemonMilkMed';
    src: url(LemonMilkMed.ttf);
}

@font-face {
    font-family: 'PoppinMed';
    src: url(Poppins-Medium.ttf);
}

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #222222;
    margin: auto;
}

li, a, button {
    font-family: 'LemonMilkMed', sans-serif;
    font-size: 16px;
    color: #FCFBF8;
    text-decoration: none;
    font-weight: 100;
}
 header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 5%;
    background-color: rgb(55, 55, 55);
    border: none;
    padding: 8px;
    background-size: 100px 90px;
    text-shadow: #a1a1a1;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
 }

 .Pages {
    list-style: none;
    text-align: center;
    align-content: center;
 }

 .Pages li a {
    transition: all 0.3s ease 0s;
 }

 .Pages li a:hover {
    color: #0082a2; 
}

.pricingbut {
    margin-left: 30px;
    padding: 9px 25px;
    border: none;
    border-radius: 50px;
    cursor: pointer; 
    transition: all 0.3s ease 0s;
    background: #d74256;
    box-shadow: 1px 1px 5px rgba(238, 56, 56, 0.565);
}

.pricingbut:hover {
    background: #ca3e51;
    box-shadow: 1px 1px 0px rgba(238, 56, 56, 0.565);
}

.Pages {
    list-style: none;
    word-spacing: 25px;
    justify-content: center;
}

.Pages li {
    display: inline-block;
}

.Pages li a {
    transition: all 0.3s ease 0s;
}

.Pages li a:hover {
    color: #ff6675;
}

.header h1 {
    font-family: 'LemonMilkMed';
    color: #FCFBF8;
    text-align: center;
    font-size: 20px;
    text-shadow: #a1a1a1;
}

.header {
    padding: 10px 30px;
}

@font-face {
    font-family: 'PoppingMed';
    src: url(Poppins-Medium.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
.card-wrap {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
body {
    background: linear-gradient(to right, #262626, #303030);
    background-size: 100%;
}

:root {
    --color-text: #616161;
    --color-text-btn: #eeeeee;
    --card1-gradient-color1: #f12711;
    --card1-gradient-color2: #f5af19;
    --card2-gradient-color1: #7F00FF;
    --card2-gradient-color2: #E100FF;
    --card3-gradient-color1: #3f2b96;
    --card3-gradient-color2: #a8c0ff;
    --card4-gradient-color1: #11998e;
    --card4-gradient-color2: #38ef7d;
}
.card-wrap {
    width: 220px;
    background: #262626;
    border-radius: 20px;
    border: 5px solid #363636;
    overflow: hidden;
    color: var(--color-text);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
                rgba(0, 0, 0, 0.23) 0px 6px 6px;
    gap: 30px;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
}
.card-wrap:hover {
    transform: scale(1.05);
}
.card-header {
    height: 200px;
    width: 100%;
    background: red;
    border-radius:100% 0% 100% 0% / 0% 50% 50% 100%;
    display: grid;
    place-items: center;
}

.card-header i {
    color: #fff;
    font-size: 72px;
}
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    margin: 0 auto;
}
.card-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 20px;
  
}
.card-text {
    text-align: center;
    font-size: 12px;
    margin-bottom: 20px;
    color: #979797;
}
.card-btn {
    transition: all 0.4s ease;
    border: none;
    border-radius: 100px;
    padding: 5px 30px;
    color: #fff;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.card-header.one {
    background: linear-gradient(to bottom left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-header.two {
    background: linear-gradient(to bottom left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-header.three {
    background: linear-gradient(to bottom left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-header.four {
    background: linear-gradient(to bottom left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-btn.one {
    background: linear-gradient(to left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-btn.two {
    background: linear-gradient(to left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-btn.three {
    background: linear-gradient(to left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-btn.four {
    background: linear-gradient(to left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-btn.one:hover {
    opacity: 80%;
}
.card-btn.two:hover {
    opacity: 80%;
}
.card-btn.three:hover {
    opacity: 80%;
}
.card-btn.four:hover {
    opacity: 80%;
}

#one {
    margin-top: 100px;
    margin-left: 130px;
}
#two {
    margin-top: -393px;
    margin-left: 395px;
}
#three {
    margin-top: -393px;
    margin-left: 655px;
}
#four {
    margin-top: -393px;
    margin-left: 920px;
}

<header class="header">
    <ul class="Pages">
        <li><a href="HomePage.html">Home</a></li>
        <li><a href="ContentPage.html">Content</a></li>
        <li><a href="AboutPage.html">About</a></li>
    </ul>
    <a class="Pricing" href="PricingPage.html"><button class="pricingbut">Pricing</button></a>
</header>

<div class="card-wrap" id="one">
    <div class="card-header one">
        <i class="fas fa-code"></i>
    </div>
    <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <a href="#"><button class="card-btn one">get</button></a>
    </div>
</div>

<div class="card-wrap" id="two">
    <div class="card-header two">
        <i class="fab fa-css3-alt"></i>
    </div>
    <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <a href="#"><button class="card-btn two">get</button></a>
    </div>
</div>

<div class="card-wrap" id="three">
    <div class="card-header three">
        <i class="fab fa-html5"></i>
    </div>
    <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <a href="#"><button class="card-btn three">get</button></a>
    </div>
</div>
<div class="card-wrap" id="four">
    <div class="card-header four">
        <i class="fab fa-js-square"></i>
    </div>
    <div class="card-content">
        <h1 class="card-title">Title</h1>
        <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <a href="#"><button class="card-btn four">get</button></a>
    </div>
</div>

不要使用頁邊距在頁面上放置元素:

#four {
    margin-top: -393px;
    margin-left: 920px;
}

它基本上是在說，& quot不管屏幕大小或容器限制如何，總是把這個元素放在離邊緣這么遠的地方。"這當然不會考慮諸如屏幕大小或容器限制之類的事情。

相反，把這些& quot卡片& quot到使用display: flex的包含元素中；樣式來動態排列它們。也許是這樣的:

@font-face {
    font-family: 'LemonMilkMed';
    src: url(LemonMilkMed.ttf);
}

@font-face {
    font-family: 'PoppinMed';
    src: url(Poppins-Medium.ttf);
}

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background-color: #222222;
    margin: auto;
}

li, a, button {
    font-family: 'LemonMilkMed', sans-serif;
    font-size: 16px;
    color: #FCFBF8;
    text-decoration: none;
    font-weight: 100;
}
 header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 5%;
    background-color: rgb(55, 55, 55);
    border: none;
    padding: 8px;
    background-size: 100px 90px;
    text-shadow: #a1a1a1;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
 }

 .Pages {
    list-style: none;
    text-align: center;
    align-content: center;
 }

 .Pages li a {
    transition: all 0.3s ease 0s;
 }

 .Pages li a:hover {
    color: #0082a2; 
}

.pricingbut {
    margin-left: 30px;
    padding: 9px 25px;
    border: none;
    border-radius: 50px;
    cursor: pointer; 
    transition: all 0.3s ease 0s;
    background: #d74256;
    box-shadow: 1px 1px 5px rgba(238, 56, 56, 0.565);
}

.pricingbut:hover {
    background: #ca3e51;
    box-shadow: 1px 1px 0px rgba(238, 56, 56, 0.565);
}

.Pages {
    list-style: none;
    word-spacing: 25px;
    justify-content: center;
}

.Pages li {
    display: inline-block;
}

.Pages li a {
    transition: all 0.3s ease 0s;
}

.Pages li a:hover {
    color: #ff6675;
}

.header h1 {
    font-family: 'LemonMilkMed';
    color: #FCFBF8;
    text-align: center;
    font-size: 20px;
    text-shadow: #a1a1a1;
}

.header {
    padding: 10px 30px;
}

@font-face {
    font-family: 'PoppingMed';
    src: url(Poppins-Medium.ttf);
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
.card-wrap {
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
body {
    background: linear-gradient(to right, #262626, #303030);
    background-size: 100%;
}

:root {
    --color-text: #616161;
    --color-text-btn: #eeeeee;
    --card1-gradient-color1: #f12711;
    --card1-gradient-color2: #f5af19;
    --card2-gradient-color1: #7F00FF;
    --card2-gradient-color2: #E100FF;
    --card3-gradient-color1: #3f2b96;
    --card3-gradient-color2: #a8c0ff;
    --card4-gradient-color1: #11998e;
    --card4-gradient-color2: #38ef7d;
}
.card-wrap {
    width: 220px;
    background: #262626;
    border-radius: 20px;
    border: 5px solid #363636;
    overflow: hidden;
    color: var(--color-text);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
                rgba(0, 0, 0, 0.23) 0px 6px 6px;
    gap: 30px;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    justify-content: center;
    flex-wrap: wrap;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
}
.card-wrap:hover {
    transform: scale(1.05);
}
.card-header {
    height: 200px;
    width: 100%;
    background: red;
    border-radius:100% 0% 100% 0% / 0% 50% 50% 100%;
    display: grid;
    place-items: center;
}

.card-header i {
    color: #fff;
    font-size: 72px;
}
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    margin: 0 auto;
}
.card-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 20px;
  
}
.card-text {
    text-align: center;
    font-size: 12px;
    margin-bottom: 20px;
    color: #979797;
}
.card-btn {
    transition: all 0.4s ease;
    border: none;
    border-radius: 100px;
    padding: 5px 30px;
    color: #fff;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.card-header.one {
    background: linear-gradient(to bottom left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-header.two {
    background: linear-gradient(to bottom left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-header.three {
    background: linear-gradient(to bottom left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-header.four {
    background: linear-gradient(to bottom left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-btn.one {
    background: linear-gradient(to left, var(--card1-gradient-color1), var(--card1-gradient-color2));
}
.card-btn.two {
    background: linear-gradient(to left, var(--card2-gradient-color1), var(--card2-gradient-color2));
}
.card-btn.three {
    background: linear-gradient(to left, var(--card3-gradient-color1), var(--card3-gradient-color2));
}
.card-btn.four {
    background: linear-gradient(to left, var(--card4-gradient-color1), var(--card4-gradient-color2));
}

.card-btn.one:hover {
    opacity: 80%;
}
.card-btn.two:hover {
    opacity: 80%;
}
.card-btn.three:hover {
    opacity: 80%;
}
.card-btn.four:hover {
    opacity: 80%;
}

#cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    justify-content: center;
}

<header class="header">
    <ul class="Pages">
        <li><a href="HomePage.html">Home</a></li>
        <li><a href="ContentPage.html">Content</a></li>
        <li><a href="AboutPage.html">About</a></li>
    </ul>
    <a class="Pricing" href="PricingPage.html"><button class="pricingbut">Pricing</button></a>
</header>
<div id="cards-container">
  <div class="card-wrap" id="one">
      <div class="card-header one">
          <i class="fas fa-code"></i>
      </div>
      <div class="card-content">
          <h1 class="card-title">Title</h1>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <a href="#"><button class="card-btn one">get</button></a>
      </div>
  </div>
  
  <div class="card-wrap" id="two">
      <div class="card-header two">
          <i class="fab fa-css3-alt"></i>
      </div>
      <div class="card-content">
          <h1 class="card-title">Title</h1>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <a href="#"><button class="card-btn two">get</button></a>
      </div>
  </div>

  <div class="card-wrap" id="three">
      <div class="card-header three">
          <i class="fab fa-html5"></i>
      </div>
      <div class="card-content">
          <h1 class="card-title">Title</h1>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <a href="#"><button class="card-btn three">get</button></a>
      </div>
  </div>
  <div class="card-wrap" id="four">
      <div class="card-header four">
          <i class="fab fa-js-square"></i>
      </div>
      <div class="card-content">
          <h1 class="card-title">Title</h1>
          <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <a href="#"><button class="card-btn four">get</button></a>
      </div>
  </div>
</div>