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

Question

[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.

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.

If the page doesn't scroll to visualise the part of the element outside of the viewport, why do you need the element to stretch out of the viewport; would it not be easier (and just as functional) to stretch the element to the full boundaries of the viewport? Also, please can you post enough of your (relevant) "*[mcve]*" code (including the HTML) so that we can reproduce what you show/describe in your question? — David Thomas, Feb 07 '23 at 10:45
Seems a bit counter intuitive to stretch an element off screen but not have it scroll or show, but easiest way would be to have it 100% width and then minus margin on both sides rather than just one side — Pete, Feb 07 '23 at 10:46
how does your html look like? I mean not just for the div but around it, is it placed in a container? — Dejan.S, Feb 07 '23 at 10:49
Having widths set beyond 100% generally isn't a best practice in page layout. You could try width: 100vh, but you probably need to restructure your page in general — daggett, Feb 07 '23 at 10:51
Is there a reason for having it going beyond or do you want it to be edge to edge? — Dejan.S, Feb 07 '23 at 11:01
Thanks for the replies! I am very open to other solutions or ways of doing it. I'm a newbie so I'm afraid I don't have much idea of what I'm doing. If it's better to stretch it to the viewport width that'd be great too. All I'm wanting is a way to make it visually fill the screen so that there are no gaps on either side of the div. I have added the html so you can see. — monstermind, Feb 07 '23 at 11:01
@Dejan.S I would be happy with it edge to edge. I've added the html for you to see. — monstermind, Feb 07 '23 at 11:02
Does this answer your question? [Removing body margin in CSS](https://stackoverflow.com/questions/30208335/removing-body-margin-in-css) — Rickard Elimää, Feb 07 '23 at 11:23
@RickardElimää Thank you. Yes, it does. Someone gave me the solution with this. :) — monstermind, Feb 07 '23 at 11:31

score 1 · Accepted Answer · answered Feb 07 '23 at 11:08

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>

Thank you so much! That has achieved the visual effect I was wanting. — monstermind, Feb 07 '23 at 11:10
@monstermind My pleasure :) To avoid more unexpected effects from element native styles or browser-specific styles, I suggest you to use a [CSS reset](https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do) — Oddrigue, Feb 07 '23 at 11:18
Thank you! I'll definitely look into it. So much I need to learn lol. — monstermind, Feb 07 '23 at 11:21

score 1 · Answer 2 · answered Feb 07 '23 at 11:09

1

What you are after is called "full bleed". There are various approaches to this.

answered Feb 07 '23 at 11:09

myf

9,874
2
37
49

Thank you for the link. I'll do some research on this then so that hopefully I better undestand what to do in future. :) – monstermind Feb 07 '23 at 11:26

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

2 Answers2