Make CSS transition left to right - html

Question

I am trying to make a menu bar open and close from right to left. I have looked at documentation and other posts and have not been able to get it to work.
As you can see the menu is on the right of the screen but opens from the wrong direction, I tried changing it to relative and changing all the values to no avail.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginRight = "0";
}
#import url("https://fonts.googleapis.com/css?family=Nunito+Sans:900");
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-family: "Nunito Sans";
overflow-x: hidden;
font-size: 60px;
}
video{
width: 100vw;
height: 100vh;
object-fit: cover;
top: 0;
left: 0;
}
.header {
position: absolute;
font-size: 130px;
color: #2C3939;
top: 50%;
left: 50%;
transform: translate(-0%, -50%);
}
.header2 {
position: absolute;
z-index: 1;
font-size: 30px;
color: #2C3939;
top: 40%;
left: 61%;
transform: translate(-0%, -50%);
}
/* The sidebar menu */
.sidebar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 1200px;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
/* The sidebar links */
.sidebar a {
float:right;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: relative;
top: 0;
right: 25px;
font-size: 36px;
margin-right: 50px;
}
/* The button used to open the sidebar */
.openbtn {
position: fixed;
top: 5%;
left: 95%;
transform: translate(-50%, -50%);
font-size: 80px;
cursor: pointer;
color: 2C3939;
padding: 10px 15px;
border: none;
z-index: 1;
}
.openbtn:hover {
background-color: #444;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar a {font-size: 18px;}
}
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="body">
<button class="openbtn" onclick="openNav()">
<img src="assets/SidebarIcon.png" width="26.25" height="43.75">
</button>
</div>

Answer 1

you need to set the container position to absolute, and give it :
right:0
top:0
.sidebar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
z-index: 1; /* Stay on top */
position: absolute; /* Stay in place */
top: 0;
right: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
replace this with your sidebar class