Putting an element to the left of my page

Question

Hello I'm new to HTML/CSS and I need help for something : my page How can I put PORTFOLIO to the left edge of my page. Here is my code : HTML:

<nav>
    <ul id="nav">
        <li class="nav-item">PORTFOLIO</li>
        <li class="nav-item">Présentaion</li>
        <li class="nav-item">Réalisations</li>
        <li class="nav-item">Mon CV</li>
        <li class="nav-item">Me contacter</li>
    </ul>
</nav>

CSS :

#nav{
    display : flex;
    text-transform: uppercase;
    justify-content:center;
    align-items: center;  
}

.nav-item{
    text-decoration : none;
    list-style : none;
    text-transform: uppercase;
    margin-right: 2em;
    font-family: 'Oswald', sans-serif;
}

.nav-item:first-child{
    font-size:30px;
}

So I created a list to make a nav bar, I use display fex so it would be in line, I use justify-content to center my nav bar and align-items to center it horizontally. What can I put in .nav-item:first-child for the PORTFOLIO text to be on the very left of the page.

This is what I would like to achieve page

Thanks for reading me and helping me out

I tried justify-self, the left property, align self ...

Please show a picture of the final output you want to achieve. If you just want to display your *nav* on the left side, you can just put ```float:left``` on your nav class in your css. — Newbee, Apr 12 '23 at 02:42
Meaning, **PORTFOLIO** on the left side and these **Présentaion, Réalisations, Mon CV and Me contacter** is on the center of the page? — Newbee, Apr 12 '23 at 02:49
Yes, I would like to be in one list, but PORTFOLIO ( the first item of the list ) is on the left side and the other elements of the list are all in the center — Zenitsu Agatsu, Apr 12 '23 at 02:50

score 0 · Accepted Answer · answered Apr 12 '23 at 02:54

The solution will differ depending on what visual result you want to get. Judging by the context, you want the "Portfolio" item to be at the edge AND all other elements to be at the center, right?

Of course, you could just do a simple absolute positioning here, but in that case it will overlap with the buttons if the screen width is not enough, so it's better to take another approach:

Separate your buttons and your logo so they are two children of your outer container
Enable a flexbox to your nav container and align everything to center
Add a flex: 1 property to your nav buttons container so it takes up all the available space
Define a width of your logo (for example, 150px) if you need to strictly center your nav buttons in the next step
To compensate the presence of logo and strictly center your buttons (if needed), create a right-margin for your nav buttons

See the following example:

body {
  margin: 0;
  font-size: 12px;
}

.nav {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  justify-self: start;
  width: 150px;
  text-align: center;
}

#nav-buttons {
  display: flex;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  margin-right: 150px;
  padding: 0;
  flex: 1;
}

.nav-item {
  list-style: none;
  margin-right: 10px;
}

<!DOCTYPE html>
<html lang="en">

<body>
  <nav class="nav">
    <div class="logo">PORTFOLIO</div>
    <ul id="nav-buttons">
      <li class="nav-item">Présentaion</li>
      <li class="nav-item">Réalisations</li>
      <li class="nav-item">Mon CV</li>
      <li class="nav-item">Me contacter</li>
    </ul>
  </nav>
</body>

</html>

Be careful though: this design will not look good for small screens. Good luck in learning Web!

thanks a lot david appreciate your help – Zenitsu Agatsu Apr 12 '23 at 02:59 — Zenitsu Agatsu, Apr 12 '23 at 02:59

score 0 · Answer 2 · answered Apr 12 '23 at 03:37

There is already an answer. I just added mine just in case.

#nav{
  display : flex;
  text-transform: uppercase;
  justify-content:center;
  align-items: center;  
}
.nav-item{
  text-decoration : none;
  list-style : none;
  text-transform: uppercase;
  margin-right: 2em;
  font-family: 'Oswald', sans-serif;
}
.nav-item:first-child{
  position:fixed;
  left: 0;
  margin: 1rem;
  font-size:30px;
}

<nav>
  <ul id="nav">
      <li class="nav-item">PORTFOLIO</li>
      <li class="nav-item">Présentaion</li>
      <li class="nav-item">Réalisations</li>
      <li class="nav-item">Mon CV</li>
      <li class="nav-item">Me contacter</li>
  </ul>
</nav>

Putting an element to the left of my page

2 Answers2