Struggling with setting up a basic layout in Angular for my application. While I have experience with Angular, the actual HTML/CSS design is new to me.
No matter what I try, I can't seem to get this container to take up the whole screen width. Various settings on the html and container CSS classes just won't make the container fit the screen horizontally, even though it fits vertically just fine.
Additionally, the flex-direction: row property doesn't seem to be working consistently. I'm attempting to make the "side" and "main" divs inside the header div sit next to each other but they keep displaying as columns instead of rows. Despite using nowrap and inline-block display properties, the alignment just won't work. I've also tried reducing the widths of side and main hoping they would align properly, but that hasn't helped either.
Screenshot: Full View
html {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header {
margin-top: 15px;
border: 1px solid red;
height: 15vh;
flex-direction: row;
flex-wrap: nowrap;
}
.body {
border;
1px solid green;
height: 80vh;
}
.side {
width: 15vw;
border: 1px solid yellow;
}
.main {
width: 50vw;
border: 1px solid blue;
}<div class="container">
<div class="header">
<div class="side">
<p>HI</p>
<div class="main">
<p>HI2</p>
</div>
</div>
<div class="body">
<p>I am the body</p>
</div>
</div>
</div>