Where did I go wrong with this fluid grid layout? - html

Question

It's my first time here. A friend suggested this as a good source of knowledge, and I am in dire need of that!
I am trying to write HTML and CSS using a viewport, media queries and a fluid grid to create a page which scales from desktop (desktop example ) to mobile (mobile example).
I have tried to cobble it together with help from the w3c site, but someone who wasn't particularly helpful said I had bootstrap in there (I didn't intend to use that, and want it taken out but I have no idea what it is).
What I've managed to achieve is to have the mobile size work, but for some reason the colour area of the boxes that should be 50% and 25% of the width of the rows in desktop don't stretch as they should.
What did I do wrong? Help would be most, most appreciated!
This is the html I had written:
And this is the CSS: #charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 8px;
border: thin rgba(0, 0, 0, 1.00);
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.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%;
}
html {
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
}
.navspot {
width: 100%;
max-width: 100%;
padding: 10px;
height: auto;
vertical-align: middle;
background: #d9cf91;
text-align: right;
}
.maincontent {
/*properties for cell*/
/*Nothing is required here
because we can use default styles*/
background: #30332c;
color: #FFFFFF;
padding: 10px;
}
.box1 {
background-color: #dfcf91;
color: #FFFFFF;
padding: 10px;
text-align: left;
float: left;
}
.box2 {
background-color: rgba(107, 35, 36, 1.00);
color: #FFFFFF;
text-align: center;
padding: 10px;
float: left;
}
.box3 {
background-color: #8D9981;
text-align: center;
padding: 10px;
float: left;
}
.box4 {
background-color: #606956;
text-align: center;
padding: 10px;
float: left;
}
.box5 {
background-color: #8D9981;
text-align: center;
padding: 10px;
float: left;
}
.box6 {
background-color: #606956;
text-align: center;
padding: 10px;
float: left;
}
.footer {
/*properties for cell*/
/*Nothing is required here because we can use default styles*/
/*background: #d9cf91;*/
padding: 10px;
}
/*for phone*/
#media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
}
}
<div class="row">
<div class="col">
<div class="navspot">Navigation Spot
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="maincontent">Main Content Spot
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="box1">Box 1
</div>
</div>
<div class="col-6">
<div class="box2">Box 2
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="box3">Box 3
</div>
</div>
<div class="col-3">
<div class="box4">Box 4
</div>
</div>
<div class="col-3">
<div class="box5">Box 5
</div>
</div>
<div class="col-3">
<div class="box6">Box 6
</div>
</div>
<div class="row">
<div class="col">
<div class="footer">Footer Area
</div>
</div>
</div>
Sorry if I'm being a dunce. Really struggling with the concepts of CSS and fluidity. Thanks in advance!

Answer 1

Fix 1: Colored content boxes not stretching
Do as ovokuro said, and remove float:left; line from ALL of your ".box" classes.
Fix 2: Column behavior and wrapping in your grid
Some div elements in your grid are not inheriting the border-box model, as you expected. To fix this for all browsers add:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
For more about this see Box Sizing > Universal Box Sizing with Inheritance
Fix 3: Guides
While you are learning add some guides to your grid so you can more easily see what you are doing, and how things relate. For example:
/* temporary orange column guides */
[class*="col-"] {
border: 1px dotted orange;
}