title: HTML -- margin-left & -right are not working with flexbox
body: <p>I use flexbox to layout my index.html in a desktop window screen to have two div elements in one row, one long div element in the second row, and two div elements, which one of them contains a list, in the third row. I need some spacing between the two div elements in the first row and third row. When I tried using margin-left or margin-right on a div element, the div elements collapse on top of each other.</p>
  
  <p>I tried changing the width of each div element, but they end up collapsing on top of each other. I also tried justify-content and align-content on the content class but nothing happens.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  html,
  body {
      height: 100%;
  }
  
  header {
      background-color: #414C6A;
      background-image: url("../img/img2.jpg");
      background-size: 100%;
      background-position: top left;
      position: relative;
      background-repeat: no-repeat;
      padding: 20%;
      text-align: center;
      color: white;
  }
  
  footer {
      background-color: #7481AD;
      color: white;
      text-align: center;
      padding: 14px;
  }
  
  .title {
      margin: 0;
  }
  
  .unordered_list {
      list-style: none;
  }
  
  
  /* STYLING CONTENT */
  .content {
  background-color: #554A4E;
  color: white;
  padding: 1.25em;
  }
  
  .div-content,
  .div-list {
      padding: 0.75em;
      border-radius: 12px;
      margin-bottom: 1em;
  }
  
  .div-content p,
  .div-list .unordered_list {
      margin-top: 0.3125em;
      padding: 0 0.625em;
  }
  
  .div-content {
      background-color: #25476c;
  }
  
  .div-list {
      background-color: #564B75;
  }
  
  
  /* LAYOUT */
  
  body {
      display: flex;
      flex-direction: column;
  }
  
  .content {
      flex: 1 0 auto;
      display: flex;
      flex-wrap: wrap;
  }
  
  .div-content {
      width: 50%;
  }
  
  .grow {
      width: 100%;
  }
  
  .div-list {
      flex-grow: 1;
  }
  
  footer {
      flex-shrink: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;title&gt;CSS Basics&lt;/title&gt;
      &lt;!--
          Go to this link:
              http://www.cssdrive.com/imagepalette/index.php
      --&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;h1 class="title"&gt;CSS Basics&lt;/h1&gt;
      &lt;/header&gt;
  
      &lt;div class="content"&gt;
          &lt;div class="div-content item-1"&gt;
              &lt;h2&gt;What is Lorem Ipsum?&lt;/h2&gt;
              &lt;p&gt;
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry. Lorem Ipsum has been the industry's
                  standard dummy text ever since the 1500s, when an unknown
                  printer took a galley of type and scrambled it to make a
                  type specimen book. It has survived not only five centuries,
                  but also the leap into electronic typesetting, remaining essentially
                  unchanged. It was popularised in the 1960s with the release of
                  Letraset sheets containing Lorem Ipsum passages, and more recently
                  with desktop publishing software like Aldus PageMaker including
                  versions of Lorem Ipsum.
              &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="div-content item-2"&gt;
              &lt;h2&gt;Diego Salas&lt;/h2&gt;
              &lt;p&gt;
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry. Lorem Ipsum has been the industry's
                  standard dummy text ever since the 1500s, when an unknown
                  printer took a galley of type and scrambled it to make a
                  type specimen book. It has survived not only five centuries,
                  but also the leap into electronic typesetting, remaining essentially
                  unchanged. It was popularised in the 1960s with the release of
                  Letraset sheets containing Lorem Ipsum passages, and more recently
                  with desktop publishing software like Aldus PageMaker including
                  versions of Lorem Ipsum.
              &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="div-content grow"&gt;
              &lt;h2&gt;Diego's Favorite Dogs&lt;/h2&gt;
              &lt;p&gt;
                  There are many variations of passages of Lorem Ipsum available,
                  but the majority have suffered alteration in some form, by injected
                  humour, or randomised words which don't look even slightly believable.
                  If you are going to use a passage of Lorem Ipsum, you need to be sure
                  there isn't anything embarrassing hidden in the middle of text. All the
                  Lorem Ipsum generators on the Internet tend to repeat predefined chunks
                  as necessary, making this the first true generator on the Internet. It
                  uses a dictionary of over 200 Latin words, combined with a handful of
                  model sentence structures, to generate Lorem Ipsum which looks
                  reasonable. The generated Lorem Ipsum is therefore always free
                  from repetition, injected humour, or non-characteristic words etc.
              &lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="div-list"&gt;
              &lt;h2&gt;Diego's Favorite Programming Language&lt;/h2&gt;
              &lt;ul class="unordered_list"&gt;
                  &lt;li&gt;Python&lt;/li&gt;
                  &lt;li&gt;Java&lt;/li&gt;
                  &lt;li&gt;C/C++&lt;/li&gt;
                  &lt;li&gt;JavaScript&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  &lt;!--        &lt;img src="img/img1.jpg" alt="Mountain"&gt;--&gt;
  
          &lt;div class="div-content"&gt;
              &lt;h2&gt;Why do we use it?&lt;/h2&gt;
              &lt;p&gt;
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry. Lorem Ipsum has been the industry's
                  standard dummy text ever since the 1500s, when an unknown
                  printer took a galley of type and scrambled it to make a
                  type specimen book. It has survived not only five centuries,
                  but also the leap into electronic typesetting, remaining essentially
                  unchanged. It was popularised in the 1960s with the release of
                  Letraset sheets containing Lorem Ipsum passages, and more recently
                  with desktop publishing software like Aldus PageMaker including
                  versions of Lorem Ipsum.
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;p&gt;CSS Basics &amp;copy; Diego Salas&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>