Build a Website Design System(html + css)

Hello forums community of codecademy i want to make these items (presentations, position and others) aligned in the right inside the navbar how acan i fix it please and there are my code html and css: `

My first little project ![](upload://buwXr7XU3gsLON2nspX0H6TjqpV.jpeg)

The quick brown fox jumps over the lazy dog.

  • The quick brown fox jumps over the lazy dog
  • The quick brown fox jumps over the lazy dog
    • The quick brown fox jumps over the lazy dog.
    • The quick brown fox jumps over the lazy dog
    </ul>
    

The quick brown fox jumps over the lazy dog.

  1. The quick brown fox jumps over the lazy dog.
  2. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog,the quick brown fox jumps over the lazy dog. brown fox jumps over the lazy dog, brown fox jumps over the lazy dog; brown fox jumps over the lazy dog brown fox jumps over the lazy dog brown fox jumps over the lazy dog brown fox jumps over the lazy dog

![](upload://ulhi5SVshGahCJeJsH2xGWiqFgx.jpeg)

The quick brown fox jumps over the lazy dog.

![](upload://p7h9mroi8V7Gb1uC7Gk03Z65hMY.jpeg)

The quick brown fox jumps over the lazy dog.

![](upload://eKBHskPThspBSOvkkA0gyEZ6DhH.jpeg)

The quick brown fox jumps over the lazy dog.

&copy The quick brown fox jumps over the lazy dog.

and this is my css code: body { background-color: #efd9ca; margin: 0; font-family: poppins; text-align: center; width:100%; } nav { padding-bottom: 0; display: flex; position: fixed; width: 100%; background-color: red; align-items: center; top: 0%; } nav .navbar { padding: 10px 10px; display: inline-flex; text-align: right; margin-right: 40px; list-style: none; font-size: 18px; }

.navbar li {

color: #fff;
margin-right: 20px;

}
nav img {
width: 65px;
height: 80px;
}
.header {
padding-top: 80px;
}`

  • The nav item does not need display: flex since it doesn’t contain any direct children which are flex items.
  • The navbar class needs to be display:flex with justify-content: flex-end.
  • The li items needs to be display: inline-block to limit their size.

This will place the items in the fixed header items to the right side.

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