Positioning grid items in navigation bar - html

Question

im trying to get my "Home" and "Clock" link up inside the navigation-bar. I am clueless why the CSS i wrote doesnt solve this issue. Can someone help me out? Ive tried using the grid property for the children of the navigation-bar, but they seem to not fit. Is there a better way to do this?
<link rel="stylesheet" type="text/css" href="styles.css" />
<div class="container">
<div class="header">Home</div>
<div class="navigation">
Navigation
<ul>
<li>Home</li>
<li>Clock</li>
</ul>
</div>
<div class="content-large">
Overview
<div class="grid-item">
<form>
<button class="cal_btn" formaction="">Calendar</button>
</form>
</div>
<div class="grid-item">
<form>
<button class="cal_btn" formaction="">Show</button>
</form>
</div>
<div class="grid-item">
<form>
<button class="cal_btn" formaction="/tagung/">Add</button>
</form>
</div>
<div class="grid-item">
<form>
<button class="cal_btn" formaction="/cal/">Edit</button>
</form>
</div>
<div class="grid-item">
<form>
<button class="cal_btn" formaction="">Delete</button>
</form>
</div>
</div>
<div class="content-small">. . .</div>
<div class="content-small">. . .</div>
<div class="footer">Footer</div>
</div>
And the CSS file below
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: grid;
font-family: "Quicksand", sans-serif;
font-weight: bold;
font-size: 1.5rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px 50px 1fr 1fr 100px;
grid-gap: 0.5rem;
padding: 0.5rem;
box-sizing: border-box;
}
.header,
.navigation,
.footer,
.content-large,
.content-small {
padding: 0.5rem;
border: 1px solid black;
}
.container > .header {
grid-column: 1/4;
}
.container > .navigation {
grid-column: 1/4;
background-color: #eee;
}
.navigation ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column: 1/4;
font-size: large;
}
.nav-element {
font-size: 10px;
background-color: blue;
}
.container > .content-large {
grid-row: 3 / span 2;
grid-column: 1/3;
}
.grid-item {
padding: 1px;
}
.nav-item {
grid-column: 1/3;
}
.container > .cal_btn {
transition-duration: 0.4s;
background-color: #e7e7e7;
color: black;
border: 2px solid black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 300px;
height: 100px;
}
.cal_btn:hover {
background-color: aliceblue;
color: cornflowerblue;
}
.container > .footer {
grid-column: 1/4;
}
Thanks in advance!
P.S. Ive added a link to my Codesandbox here.

Answer 1

The main reason why you are not getting the desired layout is that display: grid; rule for .navigation ul makes the ul a block element, which gets the whole width of its parent. There may be various ways to achieve this. A solution with minimal changes to your code is replacing display: grid; with
display: inline-grid;
width: 200px;
Of course you can adjust the width as you wish.