我的網頁在 HTML 中有標題，但不可見

Question

所以我剛開始編碼，所以不要評判我。我試圖使用 vs code 來建立我的網站，我使用 html 和 css，但是我試圖放在程式碼左上角的標題和按鈕沒有顯示在瀏覽器上，我在網路上搜尋並可以似乎不明白。我正在使用 google chrome 瀏覽器來調試我的程式碼。

這是 html 部分：

 /* This is a reset stylesheet to ensure consistency across different browsers */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
    display: block;
 }
 body {
    line-height: 1;
 }
 ol, ul {
    list-style: none;
 }
 blockquote, q {
    quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
    content: '';
    content: none;
 }
 table {
    border-collapse: collapse;
    border-spacing: 0;
 }
 /* Custom styles for the poster store website */
 body {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    background-color: white;
    color: #333;
   }

 header {
    background-color: #87CEFA;
    color: white;
    text-align: center;
    padding: 1em;
   }
 .header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
   }
 header h1 {
    margin: 0;
    font-size: 2em;
   }
 header .subtext {
    display: block;
    font-size: 1em;
    font-style: italic;
    color: white;
    margin-top: 10px;
   }

  
  

 nav {
    background-color: #87CEFA;
    padding: 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; /* this line adds */
    top: 0; /* this line adds */
    width: 100%; /* this line adds */
    z-index: 1; /* this line adds */
 }
 nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
 }
 nav li {
    margin-right: 1em;
 }
 nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
 }
 nav a:hover {
    color: #333;
 }

 /* Add this class to main section to create space for navigation bar */
 main {
    margin: 2em 0 0 0; /* this line changed */
 }


 main {
    margin: 2em;
 }

 section {
    margin-bottom: 2em;
 }

  h2 {
    margin-top: 1em;
    font-weight: normal;
 }

    ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }
    
    li {
    margin-bottom: 1em;
    flex: 1 0 30%;
    }
    
    img {
    width: 100%;
    max-width: 200px;
    height: auto;
    }
    
    button {
        background-color: #87CEFA;
        color: white;
        padding: 0.5em 1em;
        border: none;
        font-weight: bold;
        transition: all 0.3s ease;
        cursor: pointer;
        border-radius: 5px;
        box-shadow: 0px 2px 3px #888888;
        text-transform: uppercase;
        font-size: 0.9em;
    }
    
    button:hover {
        background-color: #4169E1;
        box-shadow: 0px 4px 6px #888888;
    }

    .menu-icon {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 30px;
        cursor: pointer;
    }
    .menu-icon:before,
    .menu-icon:after,
    .menu-icon div {
        position: absolute;
        top: 12px;
        right: 0;
        height: 3px;
        width: 30px;
        background: #333;
      }
    .menu-icon:before {
        transform: rotate(45deg);
      }
    .menu-icon:after {
        transform: rotate(-45deg);
      }

    
 .category-button {
    background-color: #87CEFA;
    color: white;
    padding: 0.5em 1em;
    border: none;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0px 2px 3px #888888;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-right: 1em;
    display: block;
 }

 .category-button:hover {
    background-color: #4169E1;
    box-shadow: 0px 4px 6px #888888;
 }

    
    
    footer {
    background-color: #87CEFA;
    text-align: center;
    padding: 0.5em;
    color: #333;
    }
    
    /* Media Queries */
    @media (max-width: 767px) {
    nav ul {
    flex-direction: column;
    }
    nav li {
    margin-bottom: 0.5em;
    }
    section {
    flex: 1 0 100%;
    }
    li {
    flex: 1 0 100%;
    }
    }

<!DOCTYPE html>
<html>
  <head>
    <title>Poster Store</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <div class="header-container">
           <h1>Poster Store</h1>
           <div class="subtext">Inspiring and New</div>
      </div>
   </header>     
    <button class="menu-icon">
    </button>
       
      
    <nav>
      <ul>
        <li><a href="#featured">Featured Posters</a></li>
        <li><a href="#categories">Poster Categories</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#contact">Contact Us</a></li>
      </ul>
    </nav>
    <main>
      <section id="featured">
        <h2>Featured Posters</h2>
        <ul>
          <li>
            <h3>Poster 1</h3>
            <img src="https://i.etsystatic.com/27014418/r/il/dae7c0/2873452298/il_570xN.2873452298_j7zs.jpg" alt="Kid Cudi Man on the mood album cover poster">
            <p>Album cover poster</p>
            <button>Add to Cart</button>
          </li>
          <li>
            <h3>Poster 2</h3>
            <img src="https://images.squarespace-cdn.com/content/v1/5d210a3c8ae83700013f313b/1562529741621-YEQY08PGYXBIRU8EWBAV/Screen+Shot+2019-07-07+at+4.01.10+PM.png?format=2500w" alt="Kanye West MBDTF album cover poster">
            <p>Album cover poster</p>
            <button>Add to Cart</button>
          </li>
          <li>
            <h3>Poster 3</h3>
            <img src="https://i.ebayimg.com/images/g/hJoAAOSwNK5fEoCb/s-l1600.jpg" alt="Mac Miller Swimming album cover poster">
            <p>Album cover poster</p>
            <button>Add to Cart</button>
            <li>
            <h4>Poster 4</h4>
            <img src="https://d1csarkz8obe9u.cloudfront.net/themedlandingpages/tlp_hero_cool-posters-603bc3221337a524135e510d8ea4328a-1591125961.jpg" alt="cool">
            <p>Poster</p>
            <button>Add to Cart</button>
          </li>
          <li>
              <h5>Poster 5</h5>
              <img src="https://pbs.twimg.com/media/DwSC3wZUYAAQcUv.jpg" alt="cool">
              <p>Poster</p>
              <button>Add to Cart</button>
          </li>
        </ul>
      </section>
      <section id="categories">
        <h2>Poster Categories</h2>
        <ul>
          <li><a href="#" class="category-button">Lol</a></li>
          <li><a href="#" class="category-button">Category 2</a></li>
          <li><a href="#" class="category-button">Category 3</a></li>
        </ul>
      </section>
      <section id="about">
        <h2>About Us</h2>
        <p>A new poster store </p>
      </section>
      <section id="contact">
        <h2>Contact Us</h2>
        <p>feridtalibli854@gmail.com</p>
      </section>
    </main>
    <footer>
      <p>Copyright ©2022 Poster Store</p>
    </footer>
    <div class="menu-icon">
    </div>
  </body>
</html>

當我檢查瀏覽器時，幾乎沒有東西上面有線條，例如我嘗試一次更改頁面的字體並使用它，但我認為這不是問題...

這是該部分（css）：

body {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    background-color: white;
    color: #333;
   }

我試著在網頁的中上位置看到這樣的內容：「海報商店」和副文本「鼓舞人心且新穎」。

Answer 1

標題在 Firefox 和 Chrome 中向我顯示，我有「flex-direction：column;」添加以使元素一個在另一個之下。 該按鈕為空，沒有任何文字。

header {
  background-color: #87CEFA;
  color: white;
  text-align: center;
  padding: 1em;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100px;
}
header h1 {
  margin: 0;
  font-size: 2em;
}
header .subtext {
  display: block;
  font-size: 1em;
  font-style: italic;
  color: white;
  margin-top: 10px;
}

  

    
Poster Store
    
Inspiring and New