我正在創建一個個人作品集網站，當調整移動頁面大小時，我在其中一個網頁上的h1元素遇到了問題?？雌饋韍1元素文本正從它的div容器中泄漏出來。在我網站上的所有其他頁面上，這種情況不會發生。

以下是我的my_work.html:

<div class="my-5">
  <div class="p-5 text-center bg-body-tertiary forest-image" style="background-image: url({{ url_for('static', filename='Images/newforest.jpg') }}); background-size: cover;">
    <div class="container py-5 col-sm-6 col-xs-6">

        <h1>My Projects.</h1>


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

以下是我的my_resume.html:

<div class="my-5">
  <div class="p-5 text-center bg-body-tertiary forest-image" style="background-image: url({{ url_for('static', filename='Images/newforest.jpg') }}); background-size: cover;">
    <div class="container py-5 col-sm-6">

        <h1>Check Out My Resume!</h1>


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

這是我的styles.css:

/******************** Main Elements ************************/
.navbar {
background-color: #425F57;; !important;
}

html {
  position: relative;
  min-height: 100%;
  padding-bottom:160px;
}



body {
background-color: #C6EBC5;
margin-bottom: 100px;

}


h1 {
font-family: 'Permanent Marker', cursive;
font-size: 80px;
color: white;
text-align: center;



}

.under-title {
color: white;
font-family: 'Alegreya Sans', sans-serif;
}

h2 {
color: #425F57;
font-family: 'Alegreya Sans', sans-serif;
}

h3 {
color: #425F57;
font-family: 'Alegreya Sans', sans-serif;
}

p {
font-family: 'Alegreya Sans', sans-serif;
color: #454545;
}

.footer-section {
  background-color: #425F57;
  width: 100%;
  padding: 0px;
  font-size: 18px;
  margin: 0;


  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;

}



.footer-tabs {
margin-right: 100px;
font-family: 'Alegreya Sans', sans-serif;

}

.copyright-words {
margin-left: 100px;
font-family: 'Alegreya Sans', sans-serif;
}

.cards-holder {
background-color: #C6EBC5;
}

.projects-container {
background-color: #C6EBC5;
}

.skills-text {
text-align: left;
width: 75%;
}

.record-link {
color: #425F57;
}

/********************Images******************/

.forest-image {
  margin-top: 50px;
  height: 500px;
  background-position: center;
  background-size: cover;
}

@media (max-width: 767px) {
  .forest-image {
   background-position: center top;
  }
  }

.image-frame {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;



}

.image-frame img {
  width: auto;
  height: 100%;
  object-fit: cover;

}

/**************Buttons*******************/

.linkedin {
max-width: 20%;
height: auto;
border: none;
background: none;
}

.linkedin:hover {
background-color: #425F57;


}

.github {
max-width: 20%;
height: auto;
border: none;
}

.github:hover {
background-color: #425F57;
}

.contact-button {
background-color: #425F57;
border: none;
font-family: 'Alegreya Sans', sans-serif;
}

.contact-button:hover {
  background-color: #C4DFDF;
  color: #425F57;

}

.pdf-button {
background-color: #425F57;
border: none;
font-family: 'Alegreya Sans', sans-serif;
}

.pdf-button:hover {
 background-color: #C4DFDF;
  color: #425F57;
}

.contact-button {
background-color: #425F57;
border: none;
font-family: 'Alegreya Sans', sans-serif;
}

.contact-button:hover {
background-color: #C4DFDF;
  color: #425F57;
}


/**********************Cards for Projects******************/


.card-img-top {
  object-fit: cover;
  height: 200px; /* Adjust this value as needed */
}

.card-text {
  font-family: 'Alegreya Sans', sans-serif;
}

.card-heading {
font-size: 25px;
font-family: 'Alegreya Sans', sans-serif;
}

.view-code-container {
padding-top: 20px;
padding-left: 2px;
}

.skills-used {
margin-top: auto;
text-align: right;

}

.view-code {
  border: none;
  background-color: #425F57;
  color: white;
}

.view-code:hover {
  background-color: #C4DFDF;
  color: #425F57;
}

我到處尋找，所有的解決方案都失敗了。我的html代碼在我所有的頁面上都是完全一樣的，所以我不明白為什么這個頁面會給我帶來問題。

你對哪一頁有問題？另外，在my_work.html中有col-xs-6。

col-xs-6適用于& lt根據Bootstrap文檔顯示為576px，這意味著你的HTML并不是在所有的頁面上都是精確的。