Margin on a flex item pushes another flex item instead-CodePudding

I have an issue. I have 4 divs within a div container and i am using the grid system. For some reason the third div in the grid does not respond how it should. When i give it a margin bottom, instead of pushing the div from the bottom it will just push the fourth div beneath it down even further. Any ideas on what I'm missing here?

<!DOCTYPE html>
<html>
  <head>
    <link rel = "shortcut icon" href = "images/icon.png">
    <title>News: U.S and World News Headlines: VPR</title>
    <link rel = "stylesheet" type = "text/css" href = "css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Secular One&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Actor&family=Lato&family=Raleway:wght@200&family=Secular One&display=swap" rel="stylesheet">
  </head>
    <body>


      <div class = "section1-container">
        <div class = "item main-story">
          <img class = "vinland-s2" src = "images/vinland-s2.jpg">
          <h4>Anime</h4>
          <h3>Vinland Saga Season 2 Announced</h3>
        </div>


        <div class = "item sub-story">
          <img class = "witcher-s2" src = "images/witcher-s2.jpeg">
          <h4>Movies/TV</h4>
          <h3>First Look At The Witcher Season 2<br>See The Cast Return As Their Beloved Characters<br>
            And Which Date They Will Be Appearing Again.
          </h3>
        </div>


        <div class = "item third-story">
            <h4>Japan</h4>
        <h3>Japan Animation Industry Sales Fall 1.8% In 2020,<br> First Drop In Decade. How Does This Affect
          The Future Of Anime?<br> A Lot Of Big Named Studios Share Their Thoughts And Plans.</h3>
        </div>



       <div class = "item fourth-story">
         <img class = "follow" src = "images/follow.jpg">
         <h3>Got anything you want to share?</h3>
         <p>At VRP, we welcome your tips and stories, get started today by taking out your phone<br>
           and visiting our offical journalist site to apply for a course!
         </p>
      </div>

</div>


    </body>
</html>





*
{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body
{
  background-color: rgb(237, 236, 232);

}

.section1-container
{
  width: 70%;
  display: grid;
  margin:300px 300px;
  grid-template-columns: 1fr 1fr;
  padding:2%;
  overflow:auto;
  background-color: white;
  border:1px solid lightgrey;
  padding-top: 5%
}


.sub-story
{
margin-left: 10%;

}

.third-story
{
  grid-column-start: 2;
  grid-column-end: 3;
  margin-bottom:100px

}

.fourth-story
{
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: lightgrey;
  text-align: center;

}


.vinland-s2
{
  width: 586px;
  height: 346px;
  padding-bottom: 5%
}

.witcher-s2
{
  width: 310px
}

CodePudding user response：

Instead of using margin, you could use the gap property to separate the rows/columns.

CodePudding user response：

Is this what you're looking for ? Here's the snippet.

*
{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

body
{
  background-color: rgb(237, 236, 232);

}

.section1-container
{
  width: 70%;
  display: grid;
  margin:300px 300px;
  grid-template-columns: 1fr 1fr;
  padding:2%;
  overflow:auto;
  background-color: white;
  border:1px solid lightgrey;
  padding-top: 5%;
  grid-gap: 50px;
}


.sub-story
{
/* margin-left: 10%; */

}

.third-story
{
  grid-column-start: 2;
  grid-column-end: 3;
  /* margin-bottom:100px */

}

.fourth-story
{
  grid-column-start: 1;
  grid-column-end: 3;
  background-color: lightgrey;
  text-align: center;

}




.vinland-s2,.witcher-s2
{
  max-width: 100%;
  height: auto;
  margin-bottom: 50px;
}

<div class="section1-container">
      <div class="item main-story">
        <img class="vinland-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
        <h4>Anime</h4>
        <h3>Vinland Saga Season 2 Announced</h3>
      </div>

      <div class="item sub-story">
        <img class="witcher-s2" src="https://images.unsplash.com/photo-1580477667995-2b94f01c9516?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" />
        <h4>Movies/TV</h4>
        <h3>
          First Look At The Witcher Season 2<br />See The Cast Return As Their
          Beloved Characters<br />
          And Which Date They Will Be Appearing Again.
        </h3>
      </div>

      <div class="item third-story">
        <h4>Japan</h4>
        <h3>
          Japan Animation Industry Sales Fall 1.8% In 2020,<br />
          First Drop In Decade. How Does This Affect The Future Of Anime?<br />
          A Lot Of Big Named Studios Share Their Thoughts And Plans.
        </h3>
      </div>

      <div class="item fourth-story">
        <img class="follow" src="images/follow.jpg" />
        <h3>Got anything you want to share?</h3>
        <p>
          At VRP, we welcome your tips and stories, get started today by taking
          out your phone<br />
          and visiting our offical journalist site to apply for a course!
        </p>
      </div>
    </div>