Html 3列布局不会填充屏幕宽度

我对html/css相当陌生，我在一个项目上遇到了问题。我正在尝试为我的页面底部创建一个3列布局。我现在拥有的接近我想要的，但它不能填满屏幕的宽度。它全部集中在左侧，没有伸展以匹配屏幕。我回到学校，学习W3的例子，但仍然不起作用。我错过了什么

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>

两件事：

1.）正如@chojnicki在评论中所写，您需要将CSS（

.side

，

.middle

）中定义的类添加到HTML中

2.）要将

填充

包含在

宽度

中，以便为添加的宽度（25%+50%+25%）获得完全100%的总和（且不超过该总和，以避免最后一列进入第二列），您需要添加

框大小：边框框到所有内容（使用
*
选择器）：


*{
框大小：边框框；
}
.栏目{
浮动：左；
填充：10px；
高度：300px；
文本对齐：居中；
位置：相对位置；
}
.栏边{
宽度：25%；
}
.column.middle{
宽度：50%；
}
h1{
字体大小：24px；
}
氢{
字号：18px；
}

在INSTAGRAM上跟我来
联系我
订阅
两件事：

1.）正如@chojnicki在评论中所写，您需要将CSS（
.side
，
.middle
）中定义的类添加到HTML中

2.）要将
填充
包含在
宽度
中，以便为添加的宽度（25%+50%+25%）获得完全100%的总和（且不超过该总和，以避免最后一列进入第二列），您需要添加
框大小：边框框到所有内容（使用
*
选择器）：


*{
框大小：边框框；
}
.栏目{
浮动：左；
填充：10px；
高度：300px；
文本对齐：居中；
位置：相对位置；
}
.栏边{
宽度：25%；
}
.column.middle{
宽度：50%；
}
h1{
字体大小：24px；
}
氢{
字号：18px；
}

在INSTAGRAM上跟我来
联系我
订阅
如果要在“内部”元素中添加填充，则需要设置
框大小：边框框


.row{
宽度：100%；
}
.栏目{
浮动：左；
填充：10px；
高度：300px；
文本对齐：居中；
框大小：边框框；
}
.column.side{
宽度：25%；
}
.column.middle{
宽度：50%；
}

在INSTAGRAM上跟我来
联系我
订阅
如果要在“内部”元素中添加填充，则需要设置
框大小：边框框


.row{
宽度：100%；
}
.栏目{
浮动：左；
填充：10px；
高度：300px；
文本对齐：居中；
框大小：边框框；
}
.column.side{
宽度：25%；
}
.column.middle{
宽度：50%；
}

在INSTAGRAM上跟我来
联系我
订阅
为什么不使用.col-xs-4？
你不应该用宽度来表示你的cols，那你为什么要用col？
为什么不用。col-xs-4？
而且不应该对列使用宽度，那么为什么要使用col？
“.column.side”“column.middle”在HTML代码中没有类似的类。“.column.side”“column.middle”在HTML代码中没有类似的类。
.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;
}