HTML -- margin-left & -right are not working with flexbox

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.

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.

* {
    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;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Basics</title>
    <!--
        Go to this link:
            http://www.cssdrive.com/imagepalette/index.php
    -->
</head>
<body>
    <header>
        <h1 class="title">CSS Basics</h1>
    </header>

    <div class="content">
        <div class="div-content item-1">
            <h2>What is Lorem Ipsum?</h2>
            <p>
                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.
            </p>
        </div>

        <div class="div-content item-2">
            <h2>Diego Salas</h2>
            <p>
                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.
            </p>
        </div>

        <div class="div-content grow">
            <h2>Diego's Favorite Dogs</h2>
            <p>
                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.
            </p>
        </div>

        <div class="div-list">
            <h2>Diego's Favorite Programming Language</h2>
            <ul class="unordered_list">
                <li>Python</li>
                <li>Java</li>
                <li>C/C++</li>
                <li>JavaScript</li>
            </ul>
        </div>
<!--        <img src="img/img1.jpg" alt="Mountain">-->

        <div class="div-content">
            <h2>Why do we use it?</h2>
            <p>
                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.
            </p>
        </div>
    </div>

    <footer>
        <p>CSS Basics &copy; Diego Salas</p>
    </footer>
</body>
</html>

4 answers

  • answered 2019-08-13 03:46 Yor

    Try putting them in a flex container. You can adjust the width of the columns. See the code below. Hope it helps.

    * {
        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;
    }
    
    .div-content-container {
      display: flex;
    }
    
    .div-content {
      margin: 0 10px;
      flex: 1 0 auto;
    }
    <header>
      <h1 class="title">CSS Basics</h1>
    </header>
    
    <div class="content">
      <div class="div-content-container">
        <div class="div-content item-1">
          <h2>What is Lorem Ipsum?</h2>
          <p>...</p>
        </div>
    
        <div class="div-content item-2">
          <h2>Diego Salas</h2>
          <p>...</p>
        </div>
      </div>
      <div class="div-content grow">
        <h2>Diego's Favorite Dogs</h2>
        <p>...</p>
      </div>
      <div class="div-content-container">
        <div class="div-content div-list">
          <h2>Diego's Favorite Programming Language</h2>
          <ul class="unordered_list">
            <li>Python</li>
            <li>Java</li>
            <li>C/C++</li>
            <li>JavaScript</li>
          </ul>
        </div>
        <div class="div-content">
          <h2>Why do we use it?</h2>
          <p>...</p>
        </div>
      </div>
    </div>
    
    <footer>
      <p>CSS Basics &copy; Diego Salas</p>
    </footer>

  • answered 2019-08-13 04:48 mullac

    By wrapping each of the items that we want to be on the same row in a <div class="row"></div> you can then make it so each element will take up half of that row's width. This will also account for the margin of the items.

    The important parts here are:

    .row {
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-around;
      margin: 10px 0;
    }
    

    This make it so each row element's width is 100% of its parent object, in this case it is the container element.

    You then just need to set the width, and the margin on the .div-content and on .div-list

    width: 50%;
    margin: 0 10px;
    

    The snippet below shows this in action.

    * {
      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;
      width: 50%;
      margin: 0 10px;
    }
    
    
    /* LAYOUT */
    
    body {
      display: flex;
      flex-direction: column;
    }
    
    .content {
      flex: 1 0 auto;
      display: flex;
      flex-wrap: wrap;
    }
    
    .row {
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-around;
      margin: 10px 0;
    }
    
    .div-content {
      width: 50%;
      margin: 0 10px;
    }
    
    .grow {
      width: 100%;
    }
    
    .div-list {
      flex-grow: 1;
    }
    
    footer {
      flex-shrink: 0;
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="css/style.css">
      <title>CSS Basics</title>
      <!--
            Go to this link:
                http://www.cssdrive.com/imagepalette/index.php
        -->
    </head>
    
    <body>
      <header>
        <h1 class="title">CSS Basics</h1>
      </header>
    
      <div class="content">
        <div class="row">
          <div class="div-content item-1">
            <h2>What is Lorem Ipsum?</h2>
            <p>
              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.
            </p>
          </div>
    
          <div class="div-content item-2">
            <h2>Diego Salas</h2>
            <p>
              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.
            </p>
          </div>
        </div>
        <div class="row">
          <div class="div-content grow">
            <h2>Diego's Favorite Dogs</h2>
            <p>
              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.
            </p>
          </div>
        </div>
        <div class="row">
          <div class="div-list">
            <h2>Diego's Favorite Programming Language</h2>
            <ul class="unordered_list">
              <li>Python</li>
              <li>Java</li>
              <li>C/C++</li>
              <li>JavaScript</li>
            </ul>
          </div>
          <!--        <img src="img/img1.jpg" alt="Mountain">-->
    
          <div class="div-content">
            <h2>Why do we use it?</h2>
            <p>
              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.
            </p>
          </div>
        </div>
      </div>
    
      <footer>
        <p>CSS Basics &copy; Diego Salas</p>
      </footer>
    </body>
    
    </html>

  • answered 2019-08-13 04:51 Hiren Vaghasiya

    Here, You can change width and apply margin based on full width and in responsive mode change width for full width

    * {
        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: 48.5%;
        margin:5px 0.5% 5px 1%;
    }
    
    .div-content.rightdiv {
        width: 48.5%;
        margin:5px 1% 5px 0.5%;
    }
    
    .grow {
        width: 98%;
        margin:5px 1%;
    }
    
    .div-list {
        flex-grow: 1;
        width: 48.5%;
        margin:5px 0.5% 5px 1%;
    }
    
    footer {
        flex-shrink: 0;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <title>CSS Basics</title>
        <!--
            Go to this link:
                http://www.cssdrive.com/imagepalette/index.php
        -->
    </head>
    <body>
        <header>
            <h1 class="title">CSS Basics</h1>
        </header>
    
        <div class="content">
            <div class="div-content item-1">
                <h2>What is Lorem Ipsum?</h2>
                <p>
                    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.
                </p>
            </div>
    
            <div class="div-content item-2 rightdiv">
                <h2>Diego Salas</h2>
                <p>
                    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.
                </p>
            </div>
    
            <div class="div-content grow">
                <h2>Diego's Favorite Dogs</h2>
                <p>
                    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.
                </p>
            </div>
    
            <div class="div-list">
                <h2>Diego's Favorite Programming Language</h2>
                <ul class="unordered_list">
                    <li>Python</li>
                    <li>Java</li>
                    <li>C/C++</li>
                    <li>JavaScript</li>
                </ul>
            </div>
    <!--        <img src="img/img1.jpg" alt="Mountain">-->
    
            <div class="div-content rightdiv">
                <h2>Why do we use it?</h2>
                <p>
                    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.
                </p>
            </div>
        </div>
    
        <footer>
            <p>CSS Basics &copy; Diego Salas</p>
        </footer>
    </body>
    </html>

  • answered 2019-08-13 05:25 James

    Margins can be kind of annoying in flexbox. Notice how I set up the flex containers width to be 1oovw - 1em then set the margin to 0.5em and auto. This will create an even margin around all the elements once we add a 0.5en margin on them. Also notice how nothing collapses unless you make by increasing the flex basis of items on the same row until they no longer will fit on the same row.

    body {
        margin: 0;
        padding: 0;
    }
    
    .flex-container {
        display: flex;
        flex-wrap: wrap;
    
        /* fix flex container margin values can be adjust for desired margin */
        width: calc(100vw - 1em); /* Sets the width of the container 100 view width - 2em */
        margin: 0.5em auto; /* centers the container on the page and gives a margin top to keep the margin uniform */
    
        /* note that the width margin value should be double the desired margin */
    }
    
    .flex-container .child-flex-element {
        font-family: sans-serif;
        background: seagreen;
        color: white;
        margin: 0.5em;
        padding: 2em;
    
    }
    
    /* from here you can adjust the individual widths of each element by using flex-basis or max/min-width properties */
    
    /* You can also add media queries to make it responsive to screen sizes */
    #item-one {
        flex-basis: 100%;
        height: calc(16vh - 5em);
    }
    
    #item-two {
        flex-basis: calc(50% - 5em);
    }
    
    #item-three {
        flex-basis: calc(50% - 5em);
    }
    
    #item-four {
        flex-basis: 100%;
    }
    
    #item-five {
        flex-basis:  100%;
        height: calc(16vh - 5em);
    }
    
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="flex-container">
            <div id="item-one" class="child-flex-element">Header</div>
            <div id="item-two" class="child-flex-element">
                <h2>What is Lorem Ipsum?</h2>
                <p>
                    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.
                </p>
            </div>
            <div id="item-three" class="child-flex-element">
                <h2>Diego Salas</h2>
                <p>
                    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.
                </p>
            </div>
            <div id="item-four" class="child-flex-element">
                <h2>Diego's Favorite Programming Language</h2>
                <ul class="unordered_list">
                    <li>Python</li>
                    <li>Java</li>
                    <li>C/C++</li>
                    <li>JavaScript</li>
                </ul>
            </div>
            <div id="item-five" class="child-flex-element">Footer</div>
        </div>
    </body>
    </html>