Move last 3 items towards the right

Question

I would like to move the last three items towards the right, but I do not know how to. I tried using margin-right.

.header-right { 
  float: right;
  padding-right: 20px;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0;
    padding: 0;

}

.txt10 {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: red;
}


.header-page {
  display: flex;
  flex-flow: row wrap;
  background-color: aqua;
  height: 20px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 150px;

  }
  
.header-left {
  padding-left: 14px;

}
  
.header-right { 
  float: right;
  padding-right: 20px;
}
  
#dropDown-languages {
  width: 75px;
  height: 20px;
  margin-right: 20px;
}

  <div class="header-page text10">
    <div class="header-left"><i class="far fa-calendar"></i>138 running days</div>
    <div class="header-left"><i class="far fa-envelope"></i>admin@superbtc.biz</div>
    <select name="dropDown-languages" id="dropDown-languages">
      <option value="english">English</option>
      <option value="french">French</option>
    </select>
    <div class="header-right"><i class="fas fa-angle-right"></i> deposit</div>
    <div class="header-right"><i class="fas fa-angle-right"></i> paidout</div>
  </div>

I don’t get your question - what’s the element targeted by `.header-left:nth-child(2)` have to do with this? Add a `margin-right` on the last `.header-right` element, if you want spacing in that place …? — CBroe, May 07 '21 at 14:16
@CBroe: Sorry, I have tried with a `margin-right` on `.header-right` but I always have the same problem. I edited my first message. — eric, May 07 '21 at 14:46

score 1 · Accepted Answer · answered May 07 '21 at 14:50

1

.header-left:nth-child(2) {margin-right: auto;} is pushing the elements to the right of it all the way to the right because you're telling the margin to take up the maximum available space.

You already have .header-page { padding-left: 150px;}. If you just add padding-right:150px as well, you'll get padding on the right of the header, and the auto margin won't be able to push things all the way to the edge.

answered May 07 '21 at 14:50

Josh Regev

379
2
5

2

You edited your question while I was writing my answer. My answer is for your question as originally stated. If you want that large space between the email and dropdown, you will have to specifically target one of them somehow or other, and nth-child works fine. You could also use an id or a class instead. – Josh Regev May 07 '21 at 14:52
Sorry, I edited my first message because it is possible to solved my problem without `nth-child`. Thank you very much for your help. – eric May 07 '21 at 15:05

Move last 3 items towards the right

1 Answers1