<main>
  <p>
    You need to hover over the tiles area to see the full effect.
    The non-hovered state has no negative margins. The hovered state
    adds negative margins. Notice that the negative margins are the
    trick that draws the tiles out so that they'll align to the two
    white paragraph blocks, this one and the one below the tiles.
  </p>
  <div class="tiles">
    <div class="tile">x</div>
    <div class="tile">x</div>
    <div class="tile">x</div>
    <div class="tile">x</div>
    <div class="tile">x</div>
  </div>
  <p>
    The negative margins almost "hover" over the padding layer of the main tag. It's
    a good thing too because if they clashed then this negative margin trick wouldn't
    help us
  </p>
</main>

body { background: #eaf4f9; }
* { box-sizing: border-box; }

main {
  width: 60vw;
  min-height: 100vh;
  margin: 0 auto;
  padding: 1px 1em;
  background-color: #7dd1e4;
}

.tiles {
  outline: 3px dashed #629c79;
  display: flex;
  flex-flow: row wrap;

  &:hover {
    margin-left: -0.5em;
    margin-right: -0.5em;
  }
  
  .tile {
    background: white;
    margin: 0.5em;
    width: calc((100% / 3) - 1em);
    padding: 10px;
  }
}

p {
  background-color: #fff;
}