Javascript 为什么每列在不同的行中？

我试图创建一个包含两列的div，但每列都位于另一列的下方。我不明白为什么。在这里，我将html和css放在一起：

HTML：您可以看到在h2之后如何尝试使用一行两列进行除数运算

html{
背景：url（Fondo.jpg）无重复中心已修复；/*Poner foto de Fondo*/
背景尺寸：封面；/*Para que la foto ocupe toda la pantalla*/
溢出-y：自动；/*自动缩放*/
/*溢出-x：自动*/
字体系列：Arial，Helvetica，无衬线；/*Tipo de letra en todo el documento*/
}
正文{
边距：0！重要；/*以直线表示，以直线表示，以直线表示*/
填充：0！重要；
}
buttonESCOGER先生{
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边框：2倍实心rgb（0,0,0）；
光标：指针；
宽度：40%；
边界半径：8px；
}
.buttonESCOGER:悬停{/*您在博顿的科隆卡河畔成功*/
不透明度：0.8；
背景色：rgb（23、110、26）；
}
孔多雷斯博通{
填充：10px；
宽度：50%；
保证金：0自动；
文本对齐：居中；/*在pantalla的前面*/
}
h1{
颜色：#6b5b95；字体系列：'Helvetica Neue'，无衬线；字体大小：46px；字体重量：150；行高：20px；字母间距：1px；字体样式：斜体；/*d64161*/
文本对齐：居中；
文本阴影：2PX2PX8PX#FF0000；
}
/*向顶部导航添加黑色背景色*/
托普纳夫先生{
背景色：#045186；
溢出：隐藏；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*更改悬停时链接的颜色*/
.topnav a:悬停{
背景色：#BBE1FB；
颜色：黑色；
}
/*添加活动类以突出显示当前页面*/
.主动{
背景色：#2794DE；
颜色：白色；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
皮埃德帕吉纳先生{
位置：固定；
左：0px；
底部：0px；
高度：27px；
宽度：100%；
背景色：#2794DE；
文本对齐：居中；
浮动：对；
字体大小：10px；
}
皮埃德帕金赛德先生{
显示：内联块；
左边距：10px；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:not（：第一个子项）{display:none；}
.topnav a.icon{
浮动：对；
显示：块；
}
}
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.responsive.icon{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
}
.一些包装纸{
利润率：15px；
背景色：红色；
}
.行{
弯曲方向：行；
柔性包装：包装；
宽度：100%；
}
.栏目{
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
弹性：1；
}
.蓝柱{
背景颜色：蓝色；
高度：100px；
}
.绿柱{
背景颜色：绿色；
高度：100px；
}

腐烂
你能安静下来吗？
卡雷拉斯公共汽车站
蒂恩波斯领事
两个相等的列
第一栏中的一些文本
第二栏中的一些文本
由
函数barra（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

您缺少

行
类上的
显示：flex
属性

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

尝试在一个方向上浮动每列

 <div class='column' style='float: left'>
 <div class='column' style='float: right'>



寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码，最好是以最短的格式。我们不需要整个代码库，我试着用这个，但问题是continues@Victor_Dorado请看这把小提琴：