0

Hey guys I'm trying to making a navigation side bar and I've tried every kind of flex arrangement I could conjure up but I can't align the text in < li > elements within the 1px border I've specified, any idea why?

 #navbar {
      position: fixed;
      min-width: 290px;
      top: 0px;
      left: 0px;
      width: 300px;
      height: 100%;
      border-right: solid;
      border-color: black;
    }
    
    #navbar ul {
      height: 20%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      padding: 0;
      text-align: center;
    }
    
    #navbar li {
      list-style: none;
      border-top: 1px solid;
    }
    
    #navbar li a {
      text-decoration: none;
      color: black;
    }
 <nav id="navbar">
       <header>HTML/CSS Documentation</header>
       <ul>
         <li><a href="#Introduction" class="nav-link">Introduction</a></li>
         <li><a href="#Differences_between_html_css" class="nav-link">Differences between HTML & CSS</a></li>
         <li><a href="#Basics_of_HTML" class="nav-link">Basics of HTML</a></li>
         <li><a href="#Basics_of_CSS" class="nav-link">Basics of CSS</a></li>
         <li><a href="#Real_world_applications" id="last" class="nav-link">Real world applications</a></li>
       </ul>
      </nav>
نور
  • 1,425
  • 2
  • 22
  • 38
Romel Felipe
  • 13
  • 3

1 Answers1

0

with text-align, the content text goes to the right, did I understand you well?

 #navbar li {
      list-style: none;
      border-top: 1px solid;
      text-align: right;
      padding-right: 15px;
    }

Mockup

Matias Heredia
  • 96
  • 5