1

I want to make a header with my name on the left and a navigator with "about" "portfolio" "contact" to the right using flexbox.

I am using justify-content: flex-end; in my flexbox container but the items doesn't justify to the right, they stay to the left and I don't know why.

I can use all kinds of justify-content but the header stays the same.

I want to know how I make the name "Roger Anderson" stays to the left and "About, portfolio, contact" to the right.

/* http://meyerweb.com/eric/tools/css/reset/
       v2.0 | 20110126
       License: none (public domain)
    */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* COMEÇADO O ESTILO */

header {
  display: flex;
  justify-content: flex-end;
  background-color: black;
  height: 50px;
  align-items: center;
  width: 100%;
}

.logo-name,
.nav li {
  font-family: 'Abel', sans-serif;
  color: white;
  font-weight: 400;
  text-transform: uppercase;
  align-self: center;
  padding-left: 5px;
}

.logo {
  height: 25px;
  width: 25px;
}

a {
  text-decoration: none;
}

a:visited {
  color: white;
}

a:link {
  color: white;
}


/*
    ========================================
      Navigation
    ========================================
    */

.nav {
  margin-right: auto;
}

.nav li {
  display: inline-block;
  margin: 0 10px;
}

< !DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Roger Anderson</title><link rel="stylesheet" href="style.css"><link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"></head><body>< !-- Header --><header class="primary-header"><h5 class="logo-name">Roger Anderson</h5><nav class="nav"><ul><li><a href="about.html">about</a></li>< !-- --><li><a href="portfolio.html">portfolio</a></li>< !-- --><li><a href="contact.html">contact</a></li></ul></nav></header></body></html>My CSS:
/* http://meyerweb.com/eric/tools/css/reset/
       v2.0 | 20110126
       License: none (public domain)
    */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* COMEÇADO O ESTILO */

header {
  display: flex;
  justify-content: flex-end;
  background-color: black;
  height: 50px;
  align-items: center;
  width: 100%;
}

.logo-name,
.nav li {
  font-family: 'Abel', sans-serif;
  color: white;
  font-weight: 400;
  text-transform: uppercase;
  align-self: center;
  padding-left: 5px;
}

.logo {
  height: 25px;
  width: 25px;
}

a {
  text-decoration: none;
}

a:visited {
  color: white;
}

a:link {
  color: white;
}


/*
    ========================================
      Navigation
    ========================================
    */

.nav {
  margin-right: auto;
}

.nav li {
  display: inline-block;
  margin: 0 10px;
}
<header class="primary-header">

  <h5 class="logo-name">Roger Anderson</h5>

  <nav class="nav">
    <ul>
      <li><a href="about.html">about</a></li>
      <!--
              -->
      <li><a href="portfolio.html">portfolio</a></li>
      <!--
              -->
      <li><a href="contact.html">contact</a></li>
    </ul>
  </nav>

</header>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Plínio Helpa
  • 137
  • 1
  • 9

4 Answers4

3

You have this:

.nav {
  margin-right: auto;  
}

Instead use this:

.nav {
  margin-left: auto;  
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}



/* COMEÇADO O ESTILO */

header {
display:flex;   
justify-content: flex-end;
background-color: black;
height: 50px;
align-items:center;
width:100%;


}

.logo-name, .nav li {
font-family: 'Abel', sans-serif;
color: white;
font-weight: 400;    
text-transform: uppercase; 
align-self: center;
padding-left: 5px;    
}

.logo {
height: 25px;  
width: 25px;
}

a{text-decoration: none; }
a:visited {color: white;}
a:link {color: white;}

/*
========================================
  Navigation
========================================
*/

.nav {
 /* margin-right: auto;   */
 margin-left: auto; /* NEW */
}


.nav li {
  display: inline-block;
  margin: 0 10px;

}
<header class="primary-header">
  <h5 class="logo-name">Roger Anderson</h5>
  <nav class="nav">
    <ul>
      <li><a href="about.html">about</a></li>
      <li><a href="portfolio.html">portfolio</a></li>
      <li><a href="contact.html">contact</a></li>
    </ul>
  </nav>
</header>

Flex auto margins consume all free space in the direction of the margin.

So when you set margin-right: auto on the navigation menu, that consumes all free space on the right, pinning the menu to the left.

But if you use margin-left: auto, that consumes all free space on the left, pushing the menu away from the logo and pinning it to the right.

Here's a more complete explanation:

There are two reasons why justify-content was not working:

  1. Flex auto margins take precedence over keyword alignment properties (such as justify-content and align-items). If an auto margin is set, that gets the first shot and consumes all free space on the line. justify-content goes second, but there is no free space left, so it can't do anything.

    8.1. Aligning with auto margins

    Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

    If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all free space left over after flexing.

  2. Even if there was no auto margin, and justify-content was working, it wouldn't work as you expect because you have the value set to flex-end. This pins all items to the right. You would need to use space-between or space-around.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
2
     .primary-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }
Isak Granqvist
  • 21
  • 2
0

  1. Justify-content: flex-end; will justify both the header and the list items to the right. You want to use justify-content: space-between; instead. (A Complete Guide to Flexbox)

  2. You can use flexbox to position the list items beside each other. Just add display: flex; to .nav ul.

  3. Remove display: inline-block; from the li elements and margin-right: auto; from .nav. Personally, I prefer to solve alignment purely by flexbox properties.

Example: 

header {
  display: flex;   
  justify-content: space-between;
  background-color: black;
  height: 50px;
  align-items: center;
  width: 100%;
}

.nav ul {
  display: flex;
}

Codepen: https://codepen.io/anon/pen/PeKXYw

haugsand
  • 400
  • 1
  • 5
  • Your explanation for why the items are pinned to the left is incorrect. Also, `margin-right: auto` on the `.nav` element is pure flexbox. – Michael Benjamin May 04 '18 at 16:46
0

Simplified Version:

display: flex; aligns the two divs side by side.

margin-left: auto; aligns the second div to the right.

align-items: center; aligns the contents vertically.

/* Required Code */

#divNav {
  align-items: center;
  display: flex;
}

#divNavRight {
  margin-left: auto;
}

/* Extra Code */

#divNav {
  border: black solid 2px;
}

#divNav a {
  margin: 16px;
}
<div id="divNav">
  <a href="/" style="font-size: 48px;">
    LOGO
  </a>
  <a href="/">LINK</a>
  <div id="divNavRight">
    <a href="/">LINK</a>
    <a href="/">LINK</a>
    <a href="/">LINK</a>
  </div>
</div>
theMaxx
  • 3,756
  • 2
  • 27
  • 33