How can I move position of a nav bar

HTML-CSS
1

I have created a nav-bar but I want to place it at the top right of the page, in line with the logo, how can I do this? This is how it looks at the moment:

13
132812×454 14.6 KB

My HTML is:

<nav id="nav-bar" >
        <ul>
    <li><a class="features" href="#features"> Features </a></li>
    <li><a class="how-it-works" href="#how-it-works"> How it works </a></li>
    <li><a class="pricing" href="#pricing"> Pricing </a></li>
        </ul>
      </nav>

And my CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #F2F2F2; 
  font-family: 'Lato', sans-serif;
}

li {
  list-style: none;

}

a {
  color: #000;
  text-decoration: none;
  display: block;
  text-align: right;
}

header {
  padding: 10px;
}

Here’s a link to the code pen I’ve written all the code in: https://codepen.io/marta2804/pen/vYBWKvW?editors=1100

2

Are you aware with flexbox?

3

Yes I am but what do I type to move it?

4

If I understand you correct, then your header element should look like:

header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

Let me know if you need more explanations.

2 Likes
5

That was very helpful, thank you! Now it looks like this:

10
102780×198 12.1 KB

Do you know how I can make it look like this:

00
002630×130 11.6 KB

6

The display property of li elements should be equal to inline-block.

Try to set it up.

7

To get your list items as the second picture use display Inline-block.

li {
  list-style: none;
  display: inline-block;
}
1 Like
8 
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background-color: #F2F2F2; 
  font-family: 'Lato', sans-serif;
}

img {
  max-width:300px;
  margin: 10px;
  position: relative;
}

li {
  list-style: none;
  display: inline-block;
  padding: 10px ;;

}

a {
  color: #000;
  text-decoration: none;
  
  
}

header {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

This styles are giving expected output. You can try this

1 Like