Survey Form - Build a Survey Form

I have a div overlay element to put a gradient on the image. I understand that I can do this with the background as well, but I was curious and so I tested it out. My question is when I add a margin to the top of the heading and paragraph elements, why does my overlay shift down as well?

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="overlay"></div>
  <h1 id="title">Survey Form</h1>
  <p id="description">A short survey project</p>
  <form id="survey-form">
    <label for="name">Name:</label>
    <input id="name" type="text" placeholder="Enter Your Name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="Enter Your Email" required>
    <label for="number">Age 
      (optional):
    </label>
    <input id="number" type="number" min="0" max="100" placeholder="Age">
    <label for="dropdown">Which one:</label>
    <select id="dropdown">
      <option value="" selected disabled>Choose one</option>
      <option value="1">idk</option>
      <option value="2">i still don't know</option>
    </select>
    <label><input type="radio" value="a" name="a-b"> a</label>
    <label><input type="radio" value="b" name="a-b"> b</label>
    <label><input type="checkbox"  value="a1" name="a1-b1"> a1</label>
    <label><input type="checkbox" value="b1" name="a1-b1"> b1</label>
    <textarea id="comments" rows="12" cols="25" placeholder="Anything Else?"></textarea>
    <input id="submit" type="submit" value="Submit">
  </form>
</body>
</html>
/* file: styles.css */
body {
width: 100%;
height: 100vh;
margin: 0;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTv1vbwTxLHRBQ1QzlcnlZhee27s7RarIxh6g&usqp=CAU);
background-size: cover;
background-repeat: no-repeat;
color: white;
box-sizing: border-box;
}

h1, p {
margin: auto;
margin-top: 1em;
text-align: center;
}

#overlay {
width: 100%;
height: 100%;
margin: 0;
background: rgba(50, 50, 125, 0.55);
position: absolute;
}

#survey-form {
background: rgb(20, 20, 80);
width: 70%;
margin: auto;
}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.134 Safari/537.36 Edg/103.0.1264.77

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

Hi @Tadster

I guess it is because of this:

# CSS Box Model
# CSS Box Sizing
# box-sizing

Let everyone know if you have solved and got it.

Well done and happy coding!!

I’d already looked at those, those were not the issue. But, I did manage to find a stack overflow page with my issue and I worked it out. Thanks anyways!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.