Margin parameter work like this :

margin : top, right, bottom, and left,

So it should be: 0 auto 0 0

by the way flex is also a very nice position :

 .one{
    display: flex;
    width:100%;
    justify-content: flex-end;
    background-color:red;
 }
    
 .element-right{
    width: 50px;
    background-color:  blue;
 }

<div class="one">
     <div class="element-right">BOX</div>
</div>
    

    
   

You can achieve that as well with a little help from a wrapper over your original div:

HTML:

<div class="right-wrapper">
   <div class="right">

   </div>
</div>

CSS:

.right-wrapper {
   text-align: right;
}
.right {
   display: inline-block;
}

This works because the contents of the parent .right-wrapper are set to behave like text while keeping their block behavior (display: inline-block). This causes the child div to react to parent’s text-align: right.

In some cases you might find that the child div is inheriting a width property and is full width. It’s useful to then set child’s width property to auto in case the child element is supposed to be some sort of a button or other, smaller element aligned to the right side.

.right {
   display: inline-block;
   width: auto;
}

You can use margin-left: 100%. If you want to define other margin values, you can use the shorthand margin: 0 0 0 100%, for example. This will “push” the div to the right of the container.

You could always use the text-align method on divs

.parent{
 text-align: right
}
.child{
 display: inline-block
}

is there a way to do margin-right auto (always move div to right). I tried margin-right: auto; and margin: 0 0 0 auto; didn’t work.