Elements not filling entire width of screen on mobile using css grid

Question

I am trying to mock up a design for a personal/resume website, the page looks how I intended it too before resizing the page, but after resizing to mobile some of the elements on my page don't occupy the entire width of the screen(I am using a single column on mobile).

I have a 2 column layout on desktop, which changes to a single column layout for mobile with a media query, the problem occurs after the breakpoint for the media query. I have added "width=100%" to all of the elements that are impacted, as well as tried to turn on and off each style rule, such as margin and padding, individually in chrome developer tools. After several days I'm sure I am just missing whatever the problem is, or have a fundamental misunderstanding.
Screenshot of mobie layout issue

My HTML

<div class="wrapper">
    <div class="intro-box">
      <h1>Who am I, and where am I going?</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <div class="bio-box">
      <div class="photo-box">
        <h2>Thanks for discovering more about me</h2>
        <img src="davidSized.jpg" alt="David's Photo">
      </div>
    </div>
    <div class="content-wrapper">
      <h1>Learn about me here...</h1>
      <div class="selector-one selector">
        <h2>My Resume</h2>
      </div>
      <div class="selector-two selector">
        <h2>About Me</h2>
      </div>
      <div class="selector-three selector">
        <h2>More stuff</h2>
      </div>
      <div class="content">
        <p class="para-one"></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div class="contact-info-box">
      <h3>Reach out to me here....</h3>
      <ul class="contact-info">
        <li>david_jhall@yahoo.com</li>
        <li><a href="#">LinkedIn Profile</a></li>
        <li><a href="#">Facebook Profile</a></li>
        <li>More ways to contact me....</li>
      </ul>
    </div>
  </div>

My meta tag

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

the wrapper element before the media query

wrapper{
  display: grid;
  grid-template-columns: 30% auto;
  grid-template-rows: repeat(5 , auto);
  grid-gap: 15px;
}

the wrapper element after the media query

  .wrapper{
    grid-template-columns: auto;
    justify-content: center;
  }

the elements that don't span the whole page on mobile (before the mq)

.intro-box{
  grid-column: 1/3;
  margin: 0px;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),border-box,url("road.jpg") no-repeat center center;
  background-size: cover;
  color: lightgrey;
  min-height: 750px;
  max-width: 100%;
  padding: 0;
}
.bio-box{
  margin: 10px;
  border: 5px solid rgba(0, 0, 0, 0.25);
  text-align: center;
  border-radius: 10%;
  min-height: 500px;
}
.content-wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 50%;
  text-align: center;
  min-height: 500px;
  grid-gap: 5px;
  max-width: 100%;
  justify-content: center;
}
.content{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)),border-box;
  grid-column: 1/-1;
}

mq and the elemnts within it

@media screen and (max-width:700px){
  .wrapper{
    grid-template-columns: auto;
    justify-content: center;
  }
  .intro-box > h1{
    font-size: 3em;
    padding: 20px;
  }
  .bio-box{
    grid-row: 3/4;
    grid-column: 1/3;
  }
  .content-wrapper{
    margin: 0 auto;
    grid-column: 1/3;
    justify-self: center;
  }
  .content{
    padding: 20px;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 100%;
  }
}

Answer 1

Remember that padding is internal to the border of the column, so makes little difference here. Also remeber that classes are gonna be your best friend with this sort of thing, simple change some CSS of the single class in a media query and add this class to each column you want to change for mobile. That way you reduce how much code you chuck into each MQ.

Firstly, as a quick-fix (but ideally not permanent) try adding in the MQ, this CSS:

.your-div-class {
  width: 100%;
  right: 0;
}

Also, disable your x-overflow (of the body) to avoid any nasty side-scrollbars!

See whether the ' right: 0; ' property helps bring it fully to the right.

Here's what I would do:

Give each column the same class of "responsive-col" or something, then pop this into an MQ, and style it like so:

@media screen and (max-width:700px){
    .responsive-col {
      margin: 0;
      right: 0;
      width: 100%;
      font-size: 22px;
      display: block;
    }
  }

There's loads to say, but this would hopefully solve it and if you have another question I'll just answer that.

• Kieron