Trying to bring links to the right side of the nav bar with flex box

Question

I am trying to get the links to the right side of the page and the logo stay on the left side using flex box. I tried justify-content: flex-end; on .main-nav but nothing happens.

* {
  box-sizing: border-box;
}

.header {
  display: flex;
  width: 100%;
  background: green;
}

.main-nav {
  display: flex;
}

.main-nav li {
  text-align: right;
}

<header class="header">
  <h1 class="logo"><a href="#">Flexbox</a></h1>
  <ul class="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

score 0 · Answer 1 · answered Nov 18 '18 at 10:28

0

Give the <ul> element (.main-nav):

margin-left: auto;

answered Nov 18 '18 at 10:28

vsync

118,978
58
307
400

voting as duplicate then anwsering? – Temani Afif Nov 18 '18 at 10:43
@TemaniAfif -no, first answering then voting as duplicate. it was such an easy thing to answer so I said, why not take 1 minute to write it down help the guy quick. – vsync Nov 18 '18 at 12:24

score 0 · Answer 2 · answered Nov 18 '18 at 10:41

* {
    box-sizing: border-box;
}

.header {
    width: 100%;
    background: green;   
}

.main-nav {
    display: flex;
    justify-content:flex-end;
}

.main-nav li {
    text-align: right;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <!-- <script src="main.js"></script> -->
</head>

<body>
    <header class="header">
  <h1 class="logo"><a href="#">Flexbox</a></h1>
      <ul class="main-nav">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
 </header> 
</body>

</html>

The issue was that you have assigned header as flexbox and inside it, you have also assigned main-nav as flexbox as well.

Trying to bring links to the right side of the nav bar with flex box

2 Answers2