I can't see my header on my web page but it is on HTML

Question

So i just started coding so don't judge me. I was trying to create my website using vs code and im using html and css but but my headers and button that im trying to put on the left top side of the code are not showing up on the browser and i searched around the web and can't seem to figure out.I'm using google chrome browser to debug my codes.

This is the html part:

 /* 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>

When i inspect on the browser there are few things that has line over them for example i tried to change the fonts of the page all in one and used this but i don't think thats the issue...

Here is that part(css):

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

I'm trying to see on the upper middle site of the web page to say: Poster Store and the sub text to be Inspiring and New.

Answer 1

The header is shown to me in Firefox and Chrome, I have "flex-direction: column;" added so that the elements are one below the other. The button is empty, no text is there.

 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; }

 <header> <div class="header-container"> <h1>Poster Store</h1> <p class="subtext">Inspiring and New</p> </div> </header>