Right Align Div CSS

Question

I'm trying to right align a div on my navigation bar for my website. The goal is to align the div so it's always aligned in the same place towards the right of the webpage. I've tried margins, CSS positioning, and changing the div to display: inline-block;

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: 'Montserrat', sans-serif;
}

.nav-bar {
  z-index: 98;
  background-color: rgba(204, 204, 204, 0.8);
  padding: 15px;
}

.nav-img {
  height: 100px;
}

.nav-options {
  text-align: right;
}

.nav-option {
  border: none;
  background-color: rgba(204, 204, 204, 0.1);
  height: 100px;
  width: 150px;
  font-size: large;
  cursor: pointer;
  transition: all 0.5s ease-out;
  position: relative;
  bottom: 15px;
}

.nav-option:hover {
  background-color: rgba(204, 204, 204, 0.1);
  color: white;
}

p,
ul,
ol,
li,
select {
  font-family: 'Poppins', sans-serif;
}

.line {
  width: 50px;
  background-color: white;
  z-index: 99;
  height: 0.5px;
}

.hamburger-menu {
  background-color: transparent;
  border: none;
  display: inline-block;
}

.mobile-nav {
  display: none;
}

.mobile-menu {
  margin: 50px;
  padding: 0;
  z-index: 98;
  position: fixed;
  right: 0%;
  bottom: -6%;
  background-color: rgba(204, 204, 204, 0.8);
  width: 100%;
  height: 110%;
  margin-left: auto;
  margin-right: auto;
  padding: 50px;
}

.mobile-options {
  position: absolute;
  list-style: none;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 110%;
}

.mobile-option {
  width: 100%;
  height: 50px;
  font-size: large;
  letter-spacing: 2px;
  line-height: 100%;
  text-align: center;
  background-color: rgba(204, 204, 204, 0.8);
  border: none;
  padding-right: 60px;
}

.exit-btn {
  width: 50px;
  background-color: transparent;
  border: none;
  font-size: 4rem;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  float: right;
  position: absolute;
  bottom: 75%;
  left: 75%;
}

@media screen and (max-width: 830px) {
  .desktop-nav {
    display: none;
  }
  .mobile-nav {
    display: inline-block;
  }
}

<div class="nav-bar">
  <nav class="desktop-nav">
    <a href="index.html"><img src="https://picsum.photos/100" class="nav-img"></a>
    <div class="nav-options">
      <button class="nav-option">About Us</button>
      <button class="nav-option">Classes</button>
      <button class="nav-option">Contact Us</button>
    </div>
  </nav>
  <nav class="mobile-nav">
    <a href="index.html"><img src="https://picsum.photos/100" class="nav-img"></a>
    <div class="nav-options">
      <button class="hamburger-menu" id="mobile-menu-enter">
                    <div class="line"></div><br>
                    <div class="line"></div><br>
                    <div class="line"></div>
                </button>
    </div>
  </nav>

</div>

Answer 1

You can use float: right;.

You can also find other solutions here How do I right align div elements?

Answer 2

You could use position absolute to remove the element from the DOM and move your element anywhere relative to the first containing parent element up the DOM tree that has a position set. Then use positioning props like top, right, bottom and/or left to move the element on the page.

See MDN on position for more info

  :root {
  --padding: .5em;
}

/* This is the parent element, set its position to relative
so the right-div will be positioneed relative to it */
#parent {
  background: red;
  padding: .5em;
  position: relative;
}

#first-div {
  background: yellow;
  padding: var(--padding);
}

p {
  padding: var(--padding);
  background: white;
}

/* set this divs position to absolute so its top, left, bottom, right 
positioning props will be relative to its closest parent set to relative */
#right-div {
  position: absolute;
  right: calc(var(--padding) + 0px);
  top: calc(var(--padding) + 0px);
  background: green;
  color: white;
  padding: var(--padding);

<div id="parent">
  <div id="first-div">This is the first div</div>
  <p>This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a
    paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph</p>
  <div id="right-div">This is the right div</div>
</div>

Answer 3

I ended up setting the position to absolute and using vw as the property for the left attribute.

.hamburger-menu {
    background-color: transparent;
    border: none;
    position: absolute;
    left: 80vw;
    margin-right: 5vw;
}