Having trouble with my HTML layout - I want a main content area centered on the page with a sidebar that slides out from the left. Everything is working except for a large gap on the left side.
How can I move my content to the left to fill the entire page? And how do I align my center content to the top and left of the page?
Below is my CSS and HTML code:
.container{
display:flex;
width:100%;
}
<div class="container">
<div class="column">
<app-grocery-sidebar></app-grocery-sidebar>
</div>
<div class="column">
<recipes></recipes>
</div>
</div>