3 column layout will not fill width of screen - html

Question

I'm fairly new to html/css and I'm having a problem with a project. I am trying to create a 3 column layout for the bottom portion of my page. What I have right now is close to what I want, but it does not fill the width of the screen. It's all bunched on the left side and does not stretch to match the screen. I went back and followed the example from w3schools and it still didn't work. What am I missing?
HTML
<div class="row">
<div class="column">
<h1>FOLLOW ME ON <br> INSTAGRAM</h1>
</div>
<div class="column">
<h2>contact me</h2>
</div>
<div class="column">
<h1>SUBSCRIBE</h1>
</div>
</div>
CSS
.column {
float: left;
padding: 10px;
height: 300px;
text-align: center;
position: relative;
}
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}

Answer 1

If you wanna have padding "inside" element, then you need to set box-sizing: border-box.
.row {
width: 100%;
}
.column {
float: left;
padding: 10px;
height: 300px;
text-align: center;
box-sizing: border-box;
}
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
<div class="row">
<div class="column side">
<h1>FOLLOW ME ON <br> INSTAGRAM</h1>
</div>
<div class="column middle">
<h2>contact me</h2>
</div>
<div class="column side">
<h1>SUBSCRIBE</h1>
</div>
</div>

Answer 2

Two things:
1.) As #chojnicki wrote in a comment, you need to add the classes defined in the CSS (.side, .middle) to your HTML
2.) To include the padding in the width in order to get a sum of exactly 100% overall (and not more than that to avoid the last column to go under the second one) for the added widths (25% + 50% + 25%), you need to add box-sizing: border-box; to everything (using the *selector):
* {
box-sizing: border-box;
}
.column {
float: left;
padding: 10px;
height: 300px;
text-align: center;
position: relative;
}
.column.side {
width: 25%;
}
.column.middle {
width: 50%;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 18px;
}
<div class="row">
<div class="column side">
<h1>FOLLOW ME ON <br> INSTAGRAM</h1>
</div>
<div class="column middle">
<h2>contact me</h2>
</div>
<div class="column side">
<h1>SUBSCRIBE</h1>
</div>
</div>

Answer 3

Why you don't use .col-xs-4?
and you shouldn't use width to your cols so why do you use col?