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

HTML-CSS
1 
  <nav>
        <div class="nav"></div>
        <h1>Color Flip</h1>
        <ul class="nav-ul">
         <li>
             <a href="index.html">home</a>
         </li>
         <li>
             <a href="hex.html">hex</a>
         </li>
        </ul>
     </nav>
    <section>
        <main>
            <div class="container">
                <h2>background color : <span class="color">
                    #f1f5f8
                </span></h2>
                <button class="btn btn-hero" id="btn">Click Me</button>
            </div>
        </main>
    </section>

nav {
     display: -moz-inline-grid;
    list-style: none;
    font-size: 20px;
    font-family:monospace;
    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;
background-color:gray;


}
/* 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

2

What is the specific Question that you have?

3

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

4

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

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.