Solution 1 :

If you want to span images to entire width of its parent, you can try providing width 100% to images

Problem :

I have a simple piece of code at the moment and I’ve recently attempted to move away from floats to CSS grids and I’m having an issue, getting my images to span my entire width of columns.

Would someone please be able to have a look at my HTML and CSS and advise me how I would best go around fixing my issue?

/*  <!------------------------------------------------------------------------------------------------------------ 
                                                  CSS RESET
    ----------------------------------------------------------------------------------------------------------->*//* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}



/*reset*/


    body {
  margin: 40px;
}

.sidebar {
        grid-area: sidebar;
    }

    .sidebar2 {
        grid-area: sidebar2;
    }

    .content {
        grid-area: content;
    }

    .hero_image {
        grid-area: hero_image
    }

    .header {
        grid-area: header;
    }

    .footer {
        grid-area: footer;
    }

    .wrapper {
        background-color: #fff;
        color: #444;
    }

  .wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "hero_image"
     "footer"
  }


    @media only screen and (min-width: 1101px)   {
        .wrapper {
      grid-gap: 20px;
            grid-template-columns: 15% auto 15%;
            grid-template-areas:
            "header  header  header"
            "sidebar content sidebar2"
            "hero_image hero_image hero_image"
            "footer  footer  footer";
            max-width: 100%;
        }
    }

    @media only screen and (max-width: 1100px)   {
        .wrapper {
      grid-gap: 20px;
            grid-template-columns: 20% auto ;
            grid-template-areas:
            "header  header"
            "sidebar content"
            "sidebar2 sidebar2"
            "hero_image hero_image"
            "footer  footer";
            max-width: 100%;
        }
    }


    @media only screen and (max-width: 650px)  {
    .wrapper {

        grid-template-columns: 100%;
        grid-template-areas:
        "header"
        "sidebar"
        "content"
        "sidebar2"
        "hero_image"
        "footer";
      }
    }


.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%; 
}

.header, .footer {
  background-color: #999;
}

.sidebar2 {
  background-color: #ccc;
  color: #444;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--========================================================================================================== 
                                                  CHARACTER SET 
  ========================================================================================================== -->
  <meta charset="utf-8">
  <!--========================================================================================================== 
                                                  HTML WEB PAGE TITLE - IN TAB BAR 
  ========================================================================================================== -->


  <title>Swift Tools</title>
<!--========================================================================================================== 
                                                  FORCE METADATE/MICRODATA OF WHATS ON THE SITE
  ========================================================================================================== -->

  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">
  <!--========================================================================================================== 
                                                  CSS LINK
  ========================================================================================================== -->

  <link rel="stylesheet" href="style.css">
   <!--========================================================================================================== 
                                                  RESPONSIVE DESIGN SETTING
  ========================================================================================================== -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>
<div class="wrapper">
  <div class="box header">
    <header>
        <div id="header_h1">
          <h1>Swift Tools</h1>
        </div>
      </header>
    </div>

  <div class="box sidebar">
            <a href="#">Home</a>
            <a href="#">Photoshop</a>
            <a href="#">Illustrator</a>
            <a href="#">About</a>
    </div>

  <div class="box sidebar2">
    <div class="right">
            <h2 class="righth2">About</h2>
            <p class="rightp">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
  </div>
  <div class="box content">
    <div class="main">
            <h2>Lorum Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
  </div>

<div class="box hero_img">
  <div class="hero_image">
            <img src="images/new-york-4854718_1920.jpg" alt="A photo of downtown newyork in the summer sun" style="max-width:100%;height:auto;" >
          </div>

          <picture class="main_page_responsive_img">
            <source srcset="images/taxi-cab-381233_1920.jpg" media="(max-width: 620px)">
            <source srcset="images/statue-of-liberty-267948_1920.jpg" media="(max-width: 1000px)">
            <source srcset="images/new-york-city-801867_1920.jpg" media="(min-width: 1001px)">
            <source srcset="images/statue-of-liberty-267948_1920.jpg">
              <img class="hero_image" src="images/statue-of-liberty-267948_1920.jpg" alt="Statue of Liberty on a sunnyday" style="max-width:100%;height:auto;">
          </picture>
        </div>


  <div class="box footer">
    <div class="footer_p">
              <p class="right">test test test test</p>
            </div>
  </div>
</div>

</html>

By