Falcjh Falcjh - 6 months ago 12
HTML Question

getting a margin wthout breaking your grid

I made a grid of 12 columns, and it works, the moment i tested it, (6 and 6 columns) i saw that there is no margin between the border of the page and my text. the moment i add a margin the 2 columns don't line up and come underneath eachother. how can i solve this?



*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body{
width: 100%;
background-color: white;
margin: 0 auto;
}
.wrap{
width: 100%;
margin: 0;
padding: 0;
position: relative;
height:38.45px;
background-color: #053367;
border-bottom: 1px solid black;
}
/* position of the navbar */
.navbar{
margin: 0;
padding: 0;
overflow: auto;
width: 100%;
}
/* decoration of navbar buttons, center the text, put inline, width of each button, ... */
.navbar li{
display: inline-block;
position: relative;
width: 120px;
padding: 10px 0px;
float: left;
color: white;
font-size: 16px;
cursor: pointer;
text-align: center;
text-transform: Uppercase;
}
/* Styling of the links in the navbar */
.navbar li a{
text-decoration: none;
color: white;
}
/* padding so the dropdown menu get underneath the navbar */
.navbar li ul{
padding-top: 10px;
}
/* hover transition for the links */
.drop-content li:hover{
transition-property: background-color;
transition-delay: 0.1s;
transition-duration: 0.5s;
background-color: #009900;
height: auto;
}
/* styling of the dropdown content box */
.drop-content li{
text-align: left;
background-color: white;
color: black;
padding: 10px;
margin: 0;
box-shadow: 0px 1px 0px 1px hsl(0, 0%, 15%);
}
/* give active page a color */
.active{
background-color: #009900;
}
/* dropdown menu box positioning */
.drop-content{
margin: 0;
padding: 0;
position: relative;
display: none;
text-align: left;
}
/* drop the menu on hover */
.navbar li:hover .drop-content{
display: block;
}
footer{
background-color: #003566;
height: 15em;
}
/* Grid */
.row{
font-size: 0px
}
/* display the col- inline */
.row:before,
.row:after{
content: "";
clear: both;
display: inline;
}
/* styling of the col- */
[class*='col-']{
float: left;
font-size: 16px;
padding-right: 5px;
max-width: 1200px;
min-height: 1px;
margin-left: 10px;
text-align: center;
}
/* added padding not applying to last element */
[class*='col-']:last-of-type{
padding-right: 0;
}
/* container for the grid, will not exceed max width */
.grid-container{
max-width: 100%;
}
/* padding around the col-*/
.row-pad{
padding: 10px 10px 10px 10px;
}
/* defining the colums */
.col-1{width: 8.33%;}
.col-2{width: 16.66%;}
.col-3{width: 25%;}
.col-4{width: 33.3%;}
.col-5{width: 41.66%;}
.col-6{width: 50%;}
.col-7{width: 58.33%;}
.col-8{width: 66.66%;}
.col-9{width: 75%;}
.col-10{width: 83.33%;}
.col-11{width: 91.66%;}
.col-12{width: 100%;}

.well{
text-align: left;
background-color: #e0e0eb;
border: 1px solid #e1e1ec;
border-radius: 5px;
padding: 10px;
}

<nav>
<div class="wrap">
<ul class="navbar">
<li class="active"><a href="#">Home</a></li>
<li>Link 1
<ul class="drop-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Link 2
<ul class="drop-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Link 3
<ul class="drop-content">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</div>
</nav>
<div class="row">
<article>
<div class="col-6">
<p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p>
</div>
<div class="col-6">
<p class="well">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec egestas turpis,
a fringilla orci. Maecenas tristique ligula suscipit quam posuere, molestie dapibus
orci pellentesque. Integer id scelerisque sapien. Praesent eget tincidunt eros. In felis
velit, imperdiet a lectus ac, venenatis sagittis tellus. Maecenas lobortis tincidunt
enim sit amet tristique. Nulla metus odio, lacinia a bibendum a, tincidunt ac mi. Proin
lacus mi, vehicula sit amet eleifend eget, scelerisque id leo. Mauris quis sapien vehicula,
euismod mi et, ultrices ligula. Nullam in hendrerit ipsum. Fusce quis tortor vitae
orci consequat condimentum eu a ipsum. Phasellus consequat augue in augue mollis,
hendrerit tristique tellus sagittis. Morbi consequat lacinia orci eu vulputate. Nam
at nulla non velit euismod pretium cursus sit amet mi. Etiam nec pretium est.</p>
</div>
</article>
</div>




Answer

You should remove the margin-left from [class*='col-'] and you can give padding right and left to .row

.row{ 
    font-size: 0px;
    padding:0 10px;
}

Demo here: https://jsfiddle.net/IA7medd/pou8gxj6/

another solution : you can use clac() function which work on modern browsers like that :

.col-6{
    width: calc(50% - 10px)
}

see more about calc here : http://www.w3schools.com/cssref/func_calc.asp