Ma page a un titre en HTML, mais il n'est pas visible

Question

Alors je viens de commencer à coder alors ne me jugez pas. J'essaie de créer mon site Web en utilisant vs code, j'utilise html et css, mais le titre et le bouton que j'essaie de mettre dans le coin supérieur gauche du code n'apparaissent pas sur le navigateur, j'ai J'ai cherché sur le Web et je n'arrive pas à comprendre. J'utilise le navigateur Google Chrome pour déboguer mon code.

Voici la partie 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>

Lorsque j'ai vérifié le navigateur, il y avait peu de choses avec des lignes dessus, par exemple j'ai essayé de changer la police de la page une fois et de l'utiliser, mais je ne pense pas que ce soit le problème...

Voici la partie (css) :

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

J'essaie de voir quelque chose comme ceci en haut au milieu de la page : "Poster Shop" et le sous-texte "Inspiring and Original".

Answer 1

L'en-tête m'apparaît dans Firefox et Chrome, j'ai ajouté "flex-direction:column;" pour placer les éléments les uns en dessous des autres. Le bouton est vide sans aucun texte.

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