我的网页在 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