'Not able to create margins in css

I am working to create the page mentioned here : https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md

going step-by-step to get a good understanding. While I have done the breakpoints part, I am not able to create the right margins between the divs id = section in my code. Can somebody highlight what's wrong here and how can I fix it? Here is the html code. :

* {
  box-sizing: border-box;
  font-family: "Times New Roman", Times, serif;
}
h1 {
  text-align: center;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  /** center the paragraph within its container**/
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  /***/
  color: white;
  padding: 1em;
}

.container {
  width: 100%;
}
#section {
  position: relative;
  border: 1px black solid;
  background-color: gray;
  height: 200px;
}

/** for desktop display ***/
@media (min-width: 992px) {
  .mob,
  .tab,
  .desktop {
    float: left;
  }
  .desktop {
    width: 33%;
  }
}
/*** for tablet display ***/
@media (min-width: 768px) and (max-width: 991px) {
  .mob,
  .tab,
  .desktop {
    float: left;
  }
  .tab {
    width: 50%;
  }
}
/*** for mobile display ***/
@media (max-width: 767px) {
  .mob,
  .tab,
  .desktop {
    float: left;
  }
  .desktop {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
    <head>
        <title>Module 2 Solution</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel ="stylesheet" href="css/index.css">

    </head>
    <body>
        <h1>Our Menu</h1>    
        <div class = "container">
            <div id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></div>
            <div id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></div>
            <div id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></div>
        </div>   

    </body>
</html>

html css3pie

Solution 1:^[1]

you can try changing the pattern in to:

<div>
   <span></span>
   <span></span>
   <span></span>
</div>

<!DOCTYPE html>
<html>
    <head>
        <title>Module 2 Solution</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel ="stylesheet" href="style.css">

    </head>
    <body>
        <h1>Our Menu</h1>    
        <div class = "container">
            <span id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></span>
            <span id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></span>
            <span id = "section" class = "mob tab desktop">
                <p>lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad
                minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p></span>
        </div>   

    </body>
</html>

after that you can add a span to the style.css file, and change width in @media desktop to 30 %

* {
    box-sizing: border-box;
    font-family: "Times New Roman", Times, serif;
  }
  h1 {
    text-align: center;
  }
  p {
    font-family: Arial, Helvetica, sans-serif;
    /** center the paragraph within its container**/
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    /***/
    color: white;
    padding: 1em;
  }
  
  .container {
    width: 100%;
  }
  #section {
    position: relative;
    border: 1px black solid;
    background-color: gray;
    height: 200px;

  }

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

  /** for desktop display ***/
  @media (min-width: 992px) {
    .mob,
    .tab,
    .desktop {
      float: left;
    }
    .desktop {
      width: 30%;
    }
  }
  /*** for tablet display ***/
  @media (min-width: 768px) and (max-width: 991px) {
    .mob,
    .tab,
    .desktop {
      float: left;
    }
    .tab {
      width: 50%;
    }
  }
  /*** for mobile display ***/
  @media (max-width: 767px) {
    .mob,
    .tab,
    .desktop {
      float: left;
    }
    .desktop {
      width: 100%;
    }
  }

thank you hope it helps

Solution 2:^[2]

Let me try and brush up on my rusty CSS. As far as I remember id selectors must be unique, hence you can't have multiple HTML element with the same id. That would be an invalid mark up. CSS selectors on the contrary are designed for grouping HTML elements of similar styles.

To add margin to your sections, instead of having id selectors, add a section class to every section div. Notice, I've removed extra spacing around "=". It's uncommon to use them in HTML.

// HTML

<div class="container">
  <div class="mob tab desktop section">
    <p>lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="mob tab desktop section">
    <p>lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="mob tab desktop">
    <p>lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad
    minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

// CSS

.section {
  position: relative;
  border: 1px black solid;
  background-color: gray;
  height: 200px;
  // Add your desired margin here
  margin-left: 20px;
  margin-right: 20px;
}

You may notice you now have uneven horizontal spaces between sections and sections and their container. If you used 20px left and right margin on the sections, you ended up with 40px between them and 20px between the section and the container. To combat this, introduce extra 20px padding or margin on the container div.

// CSS

.container {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

Solution 3:^[3]

            #section {
            position: relative;
            border: 1px black solid;
            background-color: gray;
            height: 200px;
            margin-right: 15px;
        }
        .desktop {
            width: 31%;
        }

please do this in your css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Fajar Aji Pamungkas
Solution 2	CyberRobot
Solution 3	Pinal Sukhadiya

'Not able to create margins in css

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]