getting a margin wthout breaking your grid

Question

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 1

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

Answer 2

You should consider the box model. Actually, when you have two elenments with 50% of width, you have no extra area to add 10px for margin (You even don't have 1px). So, you should work with percentages For example: this: .col-6{width: 49%;} And inside [class*='col-'], this: margin-left: 1%;

*{
    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: 1%;
    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: 49%;}
.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>