Right Align Out The Float Property

In this suppose .header has display: flex; set. .logo, .contributor, .class 1, .class 2 has display: inline-block; set and are child to parent .header class, which is flex. How ca

Solution 1:

Use margin-left: auto; for class1

div,
nav {
  display: inline-block;
}

.header {
  display: flex;
  justify-content: space-between;
}

<headerclass="header"><divclass="left"><divclass="logo">1</div><nav></nav></div><divclass="contribute">2</div><divclass="right"><divclass="class1">3</div><divclass="class2">4</div></div></header>

Solution 2:

Simply add margin-left: auto; to .class1 and it will push itself and .class2 to the right

I fixed your class names as CSS isn't happy with a class name of only one digit, like the 1 in class 1, so either remove the space (which I did in below sample) or add i.e. nr (nr1). Also, as the items in a flex container is flex items, the display: inline-block will have no effect.

.header {
  display: flex
}

.class1 {
  margin-left: auto;
}

<headerclass="header"><divclass="logo">
  logo
  </div><nav></nav><divclass="contribute">contribute
  </div><divclass="class1">class 1
  </div><divclass="class2">class 2
  </div></header>