CSS for Verticle Navigation bar

Web Development Front-End
1

I am working on redesigning
my personal website (houseoflief.neocities.org) and I want to switch to a verticle navigation bar. Unfortunately, I’m having trouble getting the css to work and properly align the links in the allotted space. I want the navigation to be centered in the space, but it’s squished to the right no matter what I do.
What am I doing wrong?

Here is what it looks like:
Screenshot 2024-06-12 140425

And here is my css:
I couldn’t get the codebyte tag to select CSS for some reason, sorry.

.Navigation {
grid-area: Navigation;
background-color: #3C4022;
color: #f2d6a2;
font-family: Ubuntu Mono;
border: 5px solid #d9aa52;
border-radius: 2px;
padding: 1em;
}

.Navigation li {
text-align: center;
list-style-type: none;
background-color: #f2d6a2;
margin: 0;
padding: 0;
display: block;
color: #3C4022;
}

2

Hi there!

Welcome to the forums!

So, when I apply the same styles (minus some colors) this is what I get:

image
image1361×381 35.2 KB

Two very different outcomes. Are there any other styles applied causing the differences?

Could you share the HTML and CSS?

It can be shared properly by inserting the write-up between three backtick blocks.

```
code here
```

3

I am writing the new code in codecademy workspaces, so here is the link https://www.codecademy.com/workspaces/665f149b7b4945b70f9da70b I have also copied the relevant code below, including the grid code.

HTML for navigation

   <ul class="nav">
      <li><a href="/">home</a></li>
      <li>-</li>
      <li><a href="../blog.html">blog</a></li>
      <li>-</li>
      <li><a href="../prose.html">prose</a></li>
      <li>-</li>
      <li><a href="../poetry.html">poetry</a></li>
      <li>-</li>
      <li><a href="../comics.html">comics</a></li>
      <li>-</li>
      <li><a href="../sketchbook.html">sketchbook</a></li>
      <li>-</li>
      <li><a href="linktr.ee/houseoflief.art">links</a></li>
    </ul>   
  </div>

CSS for Navigation

  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 0.25fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "Header Body Updates"
    "Navigation Body Updates"
    "Navigation Body Updates"
    "Footer Footer Footer";
    background-image: url(./background.jpg);
}
.Navigation { 
  grid-area: Navigation; 
  background-color: #3C4022;
  font-family: Ubuntu Mono;
  border: 5px solid #d9aa52;
  border-radius: 2px;
  padding: 1em;
  font-size: 14pt;
}

.Navigation a {
  color: #3C4022; 
}

.Navigation li { 
  text-align: center;
  list-style-type: none;
  list-style-position: inside;
  background-color: #f2d6a2;
  margin: 0;
  padding: 0;
  display: block;
  color: #3C4022; 
}
4

Ah, okay. Thank you for sharing your workspace link.

The misalignment comes from the initial padding given to lists.

image

Once that is removed, the list is centered.

image

1 Like