Halaman saya mempunyai tajuk dalam HTML, tetapi ia tidak kelihatan

Question

Jadi saya baru mula mengekod jadi jangan menilai saya. Saya cuba membuat laman web saya menggunakan kod vs, saya menggunakan html dan css, namun tajuk dan butang yang saya cuba letakkan di sudut kiri atas kod tidak muncul pada penyemak imbas, saya telah mencari di web dan nampaknya tidak faham. Saya menggunakan pelayar google chrome untuk nyahpepijat kod saya.

Ini bahagian 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>

Apabila saya menyemak penyemak imbas, terdapat beberapa perkara dengan garis padanya, contohnya saya cuba menukar fon halaman sekali dan menggunakan itu, tetapi saya rasa itu bukan masalahnya...

Ini bahagian (css):

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

Saya cuba melihat sesuatu seperti ini di bahagian tengah atas halaman: "Kedai Poster" dan subteks "Berinspirasi dan Asli".

Answer 1

Pengepala ditunjukkan kepada saya dalam Firefox dan Chrome, saya mempunyai "flex-direction:column;" ditambah untuk menjadikan elemen satu di bawah yang lain. Butang kosong tanpa sebarang teks.

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