CSS Margin과 관련된 다양한 속성 다루기

header나 nav에서 한 엘리먼트만 좌측에 붙히기(좌측에 엘리먼트 정렬하기)

HTML

<div id="outer">
  <div id="logo">
      logo
  </div>
  <ul>
    <li>
      menu1
    </li>
    <li>
      menu2
    </li>
  </ul>
  <div id="auth-div">
      <span>Login</span>
  </div>
</div>

CSS

#outer{
  width: 100%;
  height: 100px;
  background-color:gray;
  display: flex;
}
#logo{
  width: 100px;
  height: 100px;
  background-color:red;
}

ul{
  margin: 0px;
  padding: 0px;
}
li{
  border: 2px solid black;
  display: inline-block;
}

#auth-div{
  width: 100px;
  height: 100px;
  background-color:yellow;
  margin-left: auto; // margin-left: auto를 사용함으로서 좌측에 가능한 모든 공간에 margin 을 넣어둠으로서 우측에 콘텐츠가 붙을 수 있게 처리 해두었습니다.
}

See the Pen 엘리먼트 정렬하기 - margin by younghyeong ryu (@wangta69) on CodePen.