ARTICLE AD BOX
<style>
.content {
/* the nav bar css */
display: flex;
margin-top: auto;
margin-bottom: auto;
background-color: gray;
padding: 10px;
}
.item {
/* items in the nav bar css */
margin-top: auto;
margin-bottom: auto;
margin-left: 20px;
}
.main {
background-color: aliceblue;
}
.right {
/* items on the right */
margin-left: auto;
}
</style>
<nav class="content">
<svg width="50px" height="50px" class="item"> <circle cx="25" cy="25" r="25" fill="blue" /></svg>
<h1 class="item">Cool Title Here</h1>
<a href="#" class="item right">Menu here</a>
</nav>
<div class="main">
<h1>main page content</h1>
<p>stuff here</p>
</div>
![Is it possible to align child elements of CSS grid items relative to each other, across the current row or the entire grid, without fixed heights? [duplicate]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)