Javascript html列不是并排堆叠的

大家好，我想知道为什么我的专栏是堆叠在一起，而不是并排

我的目标是让我的食谱组件位于页面的中心，让我的杂货边栏与食谱组件对齐

这就是网站目前的样子。我正在尝试使切换侧栏按钮与recipes组件内联

以下是我的主要应用程序html：

<div class="row">
    <div class="recipe-column">
        <recipes></recipes>
    </div>
    <div class="grocery-column">
        <app-grocery-sidebar></app-grocery-sidebar>

    </div>
</div>

我的目标是让配方组件占据整个页面，并使左上角的“toggle sidenav”按钮与导航栏对齐。因此，如果有人对如何实现这一点有任何想法，请让我知道

---

附加问题：我也不知道如何将导航栏推到页面顶部，我不喜欢那个空间。因此，如果你知道如何做到这一点，我很乐意听到。

你可以尝试编辑掉

清除：两者都有。对于导航栏上方的空间，您可以尝试
margin:0px；填充：0px
通常
*{框大小：边框框；}
修复problem@hemnathmouli我尝试添加
*{box size:border box；}
，但它不起作用，我将@Sam我从未听说过flexbox。非常感谢您提到的资源！我真的很感激！
  .column {
    float: left;
  }
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    clear: both;
  }

  .recipe-column{
      float:left;
      padding-left:10%;
  }

  .grocery-column{
      float:left;
  }