Understanding CSS grid and flexbox - html

Question

https://codepen.io/masm/pen/MxWBEB
Hello there,
I am trying to create a basic, responsive layout using CSS Grid and Flexbox. However I'm coming across some issues with the header. I don't full understand why the logo and nav aren't spanning across the 960px width.
HTML:
<div id="hd">
<div class="container">
<div class"ct">
<div class="logo">
Logo
</div>
<div class="nav">
one
two
three
four
five
</div>
</div>
</div>
CSS:
.container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "top top"
"main side"
}
.ct {
grid-area: top;
}
.logo {
background: #ddd;
}
.nav {
background: #ddf;
}
Secondly, I am trying to make it so that the logo and nav are side by side. My idea was to set .ct to display:flex, however it does not work.
.ct {
grid-area: top;
display: flex;
flex-direction: column;
}
Lastly, I want the background colors of the header to span the full width of the page, and the content (logo, nav, main, side) to take up no more than the 960px width, which is why I added a container in between the #hd and #main divs. My question here is, is this a good approach?

Answer 1

Issues I have noted in your code are the following,
you forgot to add "=" before the class name. ie " "
then you put "flex-direction: column;"
Please check the following fiddle. Hope that's what you are looking for
Try this fiddle
.ct {
grid-area: top;
display: flex;
flex-direction: row;
}

Answer 2

For side by side, you need to place them row-wise and in the center align the content of the div vertically, Also give some predefined height to it:
.ct{
height: 80px;
display: flex;
justify-content: flex-start;
align-items:center;
flex-flow: row;
}

Answer 3

Remove flex-direction: column; and there is no = after class ct
<div class="ct">
#hd {
background: #444;
}
.container {
width: 960px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas: "top top"
"main side"
}
.ct {
grid-area: top;
display: flex;
flex-direction: column;
}
.logo {
background: #ddd;
}
.nav {
background: #ddf;
}
.main {
background: #ee0099;
grid-area: main;
}
.side {
background: #efefef;
grid-area: side;
}
.ct {
grid-area: top;
display: flex;
flex-direction: column;
}
<div id="hd">
<div class="container">
<div class="ct">
<div class="logo">
Logo
</div>
<div class="nav">
one
two
three
four
five
</div>
</div>
</div>
</div>
<div id="mn">
<div class="container">
<div class="main">
<p>hello</p>
</div>
<div class="side">
<p>hello</p>
</div>
</div>
</div>