Problem with grid not sure how to set up the grid the way I want it to need help

        <div class="nav"></div>
        <h1>Color Flip</h1>
        <ul class="nav-ul">
             <a href="index.html">home</a>
             <a href="hex.html">hex</a>
            <div class="container">
                <h2>background color : <span class="color">
                <button class="btn btn-hero" id="btn">Click Me</button>
nav {
     display: -moz-inline-grid;
    list-style: none;
    font-size: 20px;
    background: gray;
    display: grid;
    grid-template-columns: repeat(4, 100px);grid-template-rows: 100px;
    grid-gap: 10px;
    grid-column: 1/2;
    grid-row-start: 1;
    grid-row-end: 3;   

 a {
     color: black;
     font-family: 'Times New Roman', Times, serif;

/* check to see if container is what I need. */
.container {
font-size: 16px;
width: 100%;
background: lightgray;
display: grid;
/* grid-template-columns: repeat(3, 100px); */
grid-template-rows: 50px 50px 50px;
justify-content: center;
height: 20rem;
margin: 9rem .1rem .1rem .1rem;

/* the button is not done. */
button {
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    background-color: powderblue;
    margin: 10px 0px 0px 0px;
    border-color: darkcyan;

Color filp

What is the specific Question that you have?

I can’t get the nav bar to work the way I want.

the nav bar buttons are stacking and not going from left to right.