style.css

*{
	box-sizing: border-box;
}

.container{

	width: 100%;
	margin: 0 auto;
}
.item{

	background-color: orange;
}

.row:after{
	content: "";
	display: table;
	clear: both;
	padding-bottom: 15px;
}

/*
	unidade/total*100
*/
.col{
	position: relative;
	min-height: 1px;
	float: left;
	padding: 0 15px;
}
.col-1{	width:  8.333%; }
.col-2{	width: 16.666%; }
.col-3{	width: 25%; 	}
.col-4{	width: 33.333%; }
.col-5{	width: 41.666%; }
.col-6{	width: 50%; 	}
.col-7{	width: 58.333%; }
.col-8{	width: 66.666%; }
.col-9{ width: 75%; 	}
.col-10{ width: 83.333%; }
.col-11{ width: 91.666%; }
.col-12{ width: 100%; }

@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        width: 992px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .container {
        width: 768px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .container {
        width: 576px;
    }
}

@media (max-width: 575px) {
    .container {
        width: 100%;
    }
}