1

As you can see There are no background-color above and below header(My Todo App). But if I just put padding: 1px 0; in header then background-color comes back. Can anyone explain how does it work. This may be silly question or something very basic but I am new to css so its so confusing to understand these simple things. Any answer is apprecited.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  
  max-width: 500px;
  margin: 30px auto; 
  background-color: #f9dfdc;
  border: 1px solid #0c4271;
  overflow: hidden;
}

header {
  background-color: #0c4271;
  color: #f9dfdc;

}
header h2, header p {
  text-align: center;
  
  margin: 10px 0;
}
<div class="wrapper">
   <header>
     <h2>
       My Todo App
     </h2>
     <p>
       Plan your entire day
     </p>
   </header>
   <main class="todo-wrapper">
     <form id="add-todo">
       <label for="input">What do you want to add ?</label>
       <input id="input">
       <button type="submit">
         Add Task
       </button>
     </form>
     
     <div class="todo-list">
       <ul>
       
       </ul>
     </div>
   </main>
  
</div>
Srabh __
  • 29
  • 1

2 Answers2

-1

Your question is not clear. But maybe that's what you mean.

* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

.wrapper {
   max-width: 500px;
   margin: 30px auto;
   background-color: #0c4271;
   border: 1px solid #0c4271;
   overflow: hidden;
   padding: 1rem;
}

header {
   background-color: #0c4271;
   color: #f9dfdc;

}

header h2,
header p {
   text-align: center;

   margin: 10px 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/show-music.css">
   <title>Document</title>
</head>
<body>
   <div class="wrapper">
      <header>
        <h2>
          My Todo App
        </h2>
        <p>
          Plan your entire day
        </p>
      </header>
      <main class="todo-wrapper">
        <form id="add-todo">
          <label for="input">What do you want to add ?</label>
          <input id="input">
          <button type="submit">
            Add Task
          </button>
        </form>
        
        <div class="todo-list">
          <ul>
          
          </ul>
        </div>
      </main>
     
   </div>
</body>
</html>

It was just a simple method. I solved this problem very simply by changing the background.

mehmet
  • 506
  • 3
  • 12
  • This may be what OP means, but you still need to explain your answer; what did you consider the problem to be? What did you change to fix that problem? Why, or how, does that work? Please [edit] your answer to add explanations. – David Thomas May 27 '21 at 04:55
  • I dont want to make entire page blue, just the header part of the html.My question was unclear. I just wanted to make background color blue from the line "Plan your entire day" to the top of the container. – Srabh __ May 27 '21 at 06:07
-1

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  
  max-width: 500px;
  margin: 30px auto; 
  background-color: #0c4271;
  border: 1px solid #0c4271;
  overflow: hidden;
}

header {
  background-color: #0c4271;
  color: #f9dfdc;

}
header h2, header p {
  text-align: center;
  
  margin: 10px 0;
}
<div class="wrapper">
        <header>
          <h2>
            My Todo App
          </h2>
          <p>
            Plan your entire day
          </p>
        </header>
        <main class="todo-wrapper">
          <form id="add-todo">
            <label for="input" style="color: #f9dfdc;">What do you want to add ?</label>
            <input id="input">
            <button type="submit">
              Add Task
            </button>
          </form>
          
          <div class="todo-list">
            <ul>
            
            </ul>
          </div>
        </main>
       
     </div>
Dhinesh
  • 59
  • 9