为什么我的css和html没有把我的项目放在我想要的地方

我刚刚（即今天！）开始使用CSS网格，但它似乎不起作用。在此之前，我注意到关于它的每个教程都使用类而不是id。这是因为你必须使用类而不是id吗？反正我也上过课，但还是没用！ 好啊只是一个简单的结构开始。我想要一个标题，左侧列用于导航，主区域，右侧列用于其他内容（外部样式表中的css），但是标题文本和图片只显示在左侧，而不是左侧的200像素

.container
{
    display:grid | inline-grid;
    grid-template-columns:200px auto 250px;
    grid-template-rows: 300px auto;
}
.navbar
{
    grid-column-start:1;
    grid-column-end:2;
    grid-row-start:2;
    grid-row-end:3;
    
}
.header
{
    grid-column-start:2;
    grid-column-end:4;
    grid-row-start:1;
    grid-row-end:2; 
}

还有HTML：（显然在标签里面！）

天文学演讲者-天文学协会

对于

.container

，您不能同时拥有网格和内联网格

---

我认为这里发生的是您从一个网站复制了这段代码，该网站将

grid | inline grid

显示为display属性的选项类和ID之间的区别在于类可以在同一页面上使用多次，而ID只能在同一页面上使用一次。此外，我没有看到在HTML代码中使用导航栏。

不能在同一规则中定义两种显示类型。选一个，啊哈！是的，就是这样。现在可以享受了——非常感谢你这么敏锐。嗯，是的，我知道，对于一个通常由几个不同样式的项目组成的页面，人们肯定会使用id而不是类，这就是为什么我想知道它。我没有包括“导航栏”纯粹是因为空间的原因。

<div class="container">
        <div class="header"><h1>Astronomy Speakers - Astronomical Societies</h1><img src="headerpic.jpg" alt="astrospe          akers header" style="margin-left:40px" /></div>
        </div>