I have a problem with my header, please help

Hello, I need assistance with my challenge. I am trying to make a header for my site but for some reason, it just won’t display itself on the page. Please look at the code:

<html>
  <head>
 <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
<style>
  body {
    background-image: url(https://images.pexels.com/photos/242236/pexels-photo-242236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    
  }
   h1 {
      font-family: Oswald;
      text-align: center;
  
    }
  
  #tribute-info {
    font-family: raleway;
    text-align: center;
  }
  
  h2 {
    font-family: Oswald;
    text-align:left;
  }
  
  #pintroduction {
    font-family: raleway;
    text-align: left;
  }

  #introduction{
  width: 700px;
  margin:  auto;
  }
  
   **#header {**
**    width: 100%;**
**    height 80px;**
**    background-color: blue;**     
  }
 </style>
 
  
  </head>
  <body>
   <div id="header">
 
    </div>
    <div id="img-div">
      <img id="image">
      <h1 id="img-caption"> <strong> Soldier Desmond Doss</strong></h1>
      
      <div id="introduction">
        <fieldset>
          <label>
            <h2 id="textintroduction">Introduction</h2>
            <p id="pintroduction"> Desmond Thomas Doss (February 7, 1919 – March 23, 2006) was a United States Army corporal who served as a combat medic with an infantry company in World War II. He was twice awarded the Bronze Star Medal for actions in Guam and the Philippines. Doss further distinguished himself in the Battle of Okinawa by saving 75 men, becoming the <u>only conscientious objector</u> to receive the Medal of Honor for his actions during the war </p>
          </label>
         </fieldset>
      </div>
        
        
       <p id="tribute-info">o</p>
        
    </div>
  </body>
</html>

Hi @veljkocukic ,
welcome to the freeCodeCamp forum!

It renders here …
https://jsfiddle.net/aj7sypeg/

I have never seen stars like these in CSS. Maybe they break it…

   **#header {**
**    width: 100%;**
**    height 80px;**
**    background-color: blue;**     

If you want to create comments, try // for single line or


/*
  text for
  multiline
  comments
*/

Thanks for the answer @michaelsndr. Those stars were subsequently added when I posted this post by the forum in order to bold them. I originally didn’t have them in my code. I apologize for that.

Ah, sorry, I thought that was already the header :sweat_smile:
There is a : missing after height.

(Btw. the <header> element that makes for better semantics than <div> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header)

1 Like

So simple and yet, I couldn’t have figured it out myself :sweat_smile:
Many thanks Michael!