Margin adding is making my div box elements shift - html

Question

I am a new html & CSS learner and my first assignment (creating a responsive design page) is giving headache. Please see my code in this url: https://jsfiddle.net/prhjfsLs/
<h1>RESPONSIVE DESIGN LAYOUT</h1>
<div>
<div class="col-lg-4 col-md-6 col-sl-12" id="Section1"><h7>Section 1</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="col-lg-4 col-md-6 col-sl-12" id="Section2"><h7>Section 2</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div class="col-lg-4 col-md-12 col-sl-12"id="Section3"><h7>Section 3</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
</div>
* {
box-sizing: border-box;
}
h1 {
font-family: georgia;
text-align: center;
color: coral;
}
#Section1 {
/*width: 420px;*/
border: 1px solid red;
margin-bottom: 5px;
margin-right: 2.5px;
margin-left: 5px;
padding: 5px;
background-color: bisque;
font-family: georgia;
}
#Section2 {
/* width: 420px;*/
border: 1px solid red;
margin-bottom: 5px;
margin-left: 2.5px;
margin-right: 2.5px;
padding: 5px;
background-color: bisque;
font-family: georgia;
}
#Section3 {
/*width: 420px;*/
margin-bottom: 5px;
margin-left: 2.5;
margin-right: 5px;
border: 1px solid red;
padding: 5px;
background-color: bisque;
font-family: georgia;
}
h7 {
background-color: chocolate;
position: relative;
border: 1px solid red;
left: 80%;
padding: inherit;
margin-top: 10px;
}
.row {
width: 100%;
}
#media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
border: 1px solid blue;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
border: 1px solid blue;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
#media (max-width: 767px) {
.col-sl-1, .col-sl-2, .col-sl-3, .col-sl-4, .col-sl-5, .col-sl-6, .col-sl-7, .col-sl-8, .col-sl-9, .col-sl-10, .col-sl-11, .col-sl-12 {
float: left;
border: 1px solid blue;
}
.col-sl-1 {
width: 8.33%;
}
.col-sl-2 {
width: 16.66%;
}
.col-sl-3 {
width: 25%;
}
.col-sl-4 {
width: 33.33%;
}
.col-sl-5 {
width: 41.66%;
}
.col-sl-6 {
width: 50%;
}
.col-sl-7 {
width: 58.33%;
}
.col-sl-8 {
width: 66.66%;
}
.col-sl-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-sl-11 {
width: 91.66%;
}
.col-sl-12 {
width: 100%;
}
}
Whenever I add margin between my div elements boxes, it is making them shift. It is my third day looking on the net for a solution.
Counting on your help,
Thanks,

Answer 1

Whenever I add margin between my div elements boxes, it is making them shift.
The reason for such behavior is because you have the media queries set as
.col-lg-4 {
width: 33.33%;
}
And you have a 3 div tags with col-lg-4 class. With this rule it occupies 99.99% width on its parent(all 3 div's together).
Now if you add a extra margin on any one div, There is no space on the parent to contain your div. So it is shifted.
To resolve this issue, You can wrap your divs and provide padding as another answer already suggested.

Answer 2

Wrap them in a container div and give that some padding. Here I removed border from your responsive classes (.col-xs-4 and so on) then it would look all good, like they have margin in between.
See in this example :
* {
box-sizing: border-box;
}
h1 {
font-family: georgia;
text-align: center;
color: coral;
}
.container{
padding:10px;
}
#Section1 {
/*width: 420px;*/
border: 1px solid red;
padding: 5px;
background-color: bisque;
font-family: georgia;
}
#Section2 {
/* width: 420px;*/
border: 1px solid red;
padding: 5px;
background-color: bisque;
font-family: georgia;
}
#Section3 {
/*width: 420px;*/
border: 1px solid red;
padding: 5px;
background-color: bisque;
font-family: georgia;
}
h7 {
background-color: chocolate;
position: relative;
border: 1px solid red;
left: 80%;
padding: inherit;
margin-top: 10px;
}
.row {
width: 100%;
}
#media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
float: left;
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {
width: 100%;
}
}
#media (max-width: 767px) {
.col-sl-1, .col-sl-2, .col-sl-3, .col-sl-4, .col-sl-5, .col-sl-6, .col-sl-7, .col-sl-8, .col-sl-9, .col-sl-10, .col-sl-11, .col-sl-12 {
float: left;
}
.col-sl-1 {
width: 8.33%;
}
.col-sl-2 {
width: 16.66%;
}
.col-sl-3 {
width: 25%;
}
.col-sl-4 {
width: 33.33%;
}
.col-sl-5 {
width: 41.66%;
}
.col-sl-6 {
width: 50%;
}
.col-sl-7 {
width: 58.33%;
}
.col-sl-8 {
width: 66.66%;
}
.col-sl-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-sl-11 {
width: 91.66%;
}
.col-sl-12 {
width: 100%;
}
}
<h1>RESPONSIVE DESIGN LAYOUT</h1>
<div>
<div class="col-lg-4 col-md-6 col-sl-12 container">
<div id="Section1"><h7>Section 1</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>
<div class="col-lg-4 col-md-6 col-sl-12 container">
<div id="Section2"><h7>Section 2</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>
<div class="col-lg-4 col-md-12 col-sl-12 container">
<div id="Section3"><h7>Section 3</h7><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>