Search code examples
htmlcssparent-childextend

How to make the div be edge to edge with sides of the viewport?

[Edit] I'm building a basic survey form for a Freecodecamp exercise and would like the top div container to reach the edge of the viewport on both sides, but there is a gap on the left-hand side. I would like to eliminate this gap.

Registration Form with top child div only stretching on right side.

Here's my code:

html,
body {
  overflow-x: hidden;
  background-color: #ffffff;
  background-image: url(https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.heading {
  text-align: center;
}

#title {
  width: 500%;
  margin-left: -200%;
  background-color: rgba(255, 255, 255, 0.3);
  font-family: Calibri, Tahoma, Arial;
  font-size: 35px;
  font-weight: 500;
  color: #272a2b;
  border-radius: 5px;
  padding: 10px 0px 10px 0px;
}
<!DOCtype html>
<html lang="en">
<link rel="stylesheet" href="styles.css">

<head>
  <metacharset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Registration Form</title>
</head>

<body>

  <div class="heading">
    <h1 id="title">Registration Form</h1>
    <p id="description">Tell us about yourself</p>
  </div>

  <!-- FORM BODY -->

  <form id="survey-form">
    <div class="form-bg">

      <div class="form-group">
        <label for="name" id="name-label">Name</label>
        <input type="text" id="name" name="name" placeholder="Enter Your Name Here" required>
      </div>

      <div class="form-group">
        <label for="email" id="email-label">Email</label>
        <input type="email" id="email" name="email" placeholder="Enter Your Email Here" required>
      </div>

      <div class="form-group">
        <label for="number" id="number-label">Age</label>
        <input type="number" id="number" name="age" min="13" max="110" placeholder="Enter Your Age">

      </div>


      <div class="form-group">

        <label for="dropdown" id="dropdown-label"> 
            Which option is your ideal role?</label>
        <select name="dropdown" id="dropdown">
          <option value="" disabled selected hidden>Select your ideal role</option>
          <option name="ideal-role" value="software-engineer">
            Software Engineer
          </option>
          <option name="ideal-role" value="software-developer">
            Software Developer
          </option>
          <option name="ideal-role" value="data-analyst">
            Data Analyst
          </option>
          <option name="ideal-role" value="web-developer">
            Web Developer
          </option>
          <option name="ideal-role" value="mobile-app-developer">
            Mobile App Developer
          </option>
        </select>

      </div>


      <div class="form-group">

        <label for="study-hours" id="hours-label">How many hours per day can you study?</label><br>

        <input type="radio" name="study-hours" id="1-hour" value="1-hour">
        <label for="1-hour">1 Hour</label><br>
        <input type="radio" name="study-hours" id="2-hours" value="2-hours">
        <label for="2-hours">2 Hours</label><br>
        <input type="radio" name="study-hours" id="3-hours" value="3-hours">
        <label for="3-hours">3 Hours</label><br>

        <input type="radio" name="study-hours" id="4-hours" value="4-hours">
        <label for="4-hours">4 Hours</label>

      </div>


      <div class="form-group">

        <label for="checkbox" id="checkbox-label">Check which activities you enjoy:</label><br>

        <input type="checkbox" name="checkbox" id="problem-solving" value="problem-solving">
        <label for="problem-solving">Problem Solving</label><br>

        <input type="checkbox" name="checkbox" id="mathematics" value="mathematics">
        <label for="mathematics">Mathematics</label><br>

        <input type="checkbox" name="checkbox" id="data-analysis" value="data-analysis">
        <label for="data-analysis">Data Analysis</label><br>

        <input type="checkbox" name="checkbox" id="graphic-design" value="graphic-design">
        <label for="graphic-design">Graphic Design</label>

      </div>



      <div class="form-group">

        <label for="comments">Add any other comments here:</label>
        <textarea name="comments" id="comments" placeholder="Type your comments here..." rows="8"></textarea>

      </div>


      <div class="button-wrap">
        <input type="submit" id="submit" value="Submit">
      </div>
    </div>




    <!-- END OF FORM BODY -->

  </form>
</body>

</html>

I have tried following this tip, but it only makes the right side stretch off the screen, not the left.

Solution

  • Inspecting the page, your problem is caused by the default margin present on the <body> tag, you can remove them by adding a margin: 0, see the corrected code :

    html, body { 
  margin: 0; /* Removed body margin that created the gaps */
  overflow-x: hidden;
  background-color: #ffffff; 
  background-image: url(https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);  
  background-attachment: fixed; 
  background-repeat: no-repeat;
} 

.heading {
  text-align: center;
  }

#title {
  /* Edited out, you don't actually need this to achieve what you want */
  /* width: 500%;
  margin-left: -200%; */
  background-color: rgba(255,255,255,0.3);
  font-family: Calibri, Tahoma, Arial;
  font-size:35px;
  font-weight: 500;
  color: #272a2b;
  border-radius: 5px;
  padding: 10px 0px 10px 0px;
}
    <!DOCtype html> 
    <html lang="en"> 
    <link rel="stylesheet" href="styles.css"> 
    <head> 
      <metacharset="UTF-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
      <title>Registration Form</title> 
      </head> 
    <body> 
      
      <div class="heading">
        <h1 id="title">Registration Form</h1>
        <p id="description">Tell us about yourself</p>
      </div>
    
     <!-- FORM BODY --> 
    
      <form id="survey-form"> 
        <div class="form-bg">
     
        <div class="form-group"> 
          <label for="name" id="name-label">Name</label> 
          <input type="text" id="name" name="name" placeholder="Enter Your Name Here" required> 
        </div> 
    
        <div class="form-group">
          <label for="email" id="email-label">Email</label>
          <input type="email" id="email" name="email" placeholder="Enter Your Email Here" required> 
        </div> 
        
        <div class="form-group"> 
          <label for="number" id="number-label">Age</label> 
          <input type="number" id="number" name="age" min="13" max="110" placeholder="Enter Your Age"> 
    
        </div>
    
    
        <div class="form-group"> 
    
          <label for="dropdown" id="dropdown-label"> 
            Which option is your ideal role?</label> 
            <select name="dropdown" id="dropdown"> 
              <option value="" disabled selected hidden>Select your ideal role</option> 
              <option name="ideal-role" value="software-engineer"> 
                Software Engineer 
              </option> 
              <option name="ideal-role"  value="software-developer"> 
                Software Developer 
              </option> 
              <option name="ideal-role"  value="data-analyst"> 
                Data Analyst 
              </option> 
              <option name="ideal-role"  value="web-developer"> 
                Web Developer 
              </option> 
              <option name="ideal-role"  value="mobile-app-developer"> 
                Mobile App Developer 
              </option> 
            </select> 
    
        </div> 
        
        
        <div class="form-group"> 
          
           <label for="study-hours" id="hours-label">How many hours per day can you study?</label><br>
           
          <input type="radio"  name="study-hours" id="1-hour" value="1-hour"> 
          <label for="1-hour">1 Hour</label><br> 
          <input type="radio"  name="study-hours" id="2-hours" value="2-hours"> 
          <label for="2-hours">2 Hours</label><br> 
          <input type="radio" name="study-hours" id="3-hours" value="3-hours"> 
          <label for="3-hours">3 Hours</label><br> 
           
          <input type="radio" name="study-hours" id="4-hours" value="4-hours"> 
          <label for="4-hours">4 Hours</label>
    
        </div> 
          
          
        <div class="form-group">
    
          <label for="checkbox" id="checkbox-label">Check which activities you enjoy:</label><br> 
           
            <input type="checkbox" name="checkbox" id="problem-solving" value="problem-solving"> 
            <label for="problem-solving">Problem Solving</label><br> 
           
            <input type="checkbox" name="checkbox" id="mathematics" value="mathematics"> 
            <label for="mathematics">Mathematics</label><br> 
             
            <input type="checkbox" name="checkbox" id="data-analysis" value="data-analysis"> 
            <label for="data-analysis">Data Analysis</label><br> 
           
            <input type="checkbox" name="checkbox" id="graphic-design" value="graphic-design"> 
            <label for="graphic-design">Graphic Design</label>
       
        </div>
    
    
    
        <div class="form-group"> 
          
            <label for="comments">Add any other comments here:</label> 
            <textarea name="comments" id="comments" placeholder="Type your comments here..." rows="8"></textarea> 
           
        </div> 
        
    
        <div class="button-wrap"> 
          <input type="submit" id="submit" value="Submit">
        </div>
        </div>
        
        
        
    
    <!-- END OF FORM BODY -->
    
       </form> 
    </body> 
    </html>