0

I've been trying to make a navbar with css grid. However des pite my best efforts the elements refuse to align according to the grid I have set. Please look over this html and css and help me identify my problem.

<body>
    <nav class="container">
        <div class="1">
            <a href="#intro">home</a>
        </div>
        <div class="2">
            <a href="#work">work</a>
        </div>
        <div class="3">
            <a href="#contact">contact</a>
        </div>
    </nav>

and this is the corresponding css for the navbar

body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

nav {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;

}
.container> div:nth-child(odd){
    background: #000;
    padding:1em;
}

nav.container {
    height: 100px;
    background: #e59033;
    align-items: center;
    align-text: center;
    border: 1px solid #000;
}

.1 {
    grid-column: 5;
}

.2 {
    grid-column: 6;
}

.3 {
    grid-column: 7;
}

According to me this seems fine but for the life of me I can't figure out where I am going wrong.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jenson Varghese
  • 33
  • 5

1 Answers1

0

I got the solution, while the implementation of css grid is spot on, the html is not. You should never name a class with just a number.

renaming the div classes to c1,c2,c3 fixed this issue. Thanks!

Jenson Varghese
  • 33
  • 5