Positioning the menu option to the far right

aminbasiran 0
Viewed 12

enter image description here

i want to position my menu option(3 lines) to the far right on the @media(max-width:900px). How can i do that without ruining the margin whenever I size down the screen even more?

i tried several way with position:relative using left property but that didnt work very well.

nav div.menu a {
  text-decoration: none;
  padding: 20px 25px;
  color: azure;
  transition: all 0.4s ease-out;
}

div.menu a:hover {
  color: rgb(99, 255, 203);
  /* transform: translatex(5px) translateY(-5px); */
  font-size: 1.2rem;
}

@media only screen and (max-width:1320px) {
  .header {
    padding: 0 50px;
  }
}

@media only screen and (max-width:1110px) {
  .header {
    padding: 0 20px;
  }
}

@media only screen and (max-width:900px) {
  .hamburger-button {
    display: flex;
  }
  .hamburger-button .bar {
    background-color: rgb(255, 255, 255);
    width: 5px;
    height: 30px;
    margin: 0px 5px;
  }
  nav div.menu {
    display: none;
  }
}

css html
1 Answers

I would recommend using CSS Flexbox.

Then you can do something like this:

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

I don't know what your container element is, so you will have to replace that obviously.

nyarthan0
Related