How to get the sidebar to the right side of the screen

Question

I'm new to css, so don't mind my skills, I copied this code from somebody else online. What I want to do is, having the sidebar to be at the right and when you hover over it, the details pop out towards the left. I'd appreciate any help that I get.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="sidebar">
    <nav>
      <ul>
        <li>
          <a href="#"><i class="fa fa-facebook-f"></i><span>Facebook</span></a>
        </li>
        <li>
          <a href="#"><i class="fa fa-instagram"></i><span>Instagram</span></a>
        </li>
      </ul>
    </nav>
  </div>
</link>

@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
.sidebar *{
    background-color: #333;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar {
    display: inline;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
}
.sidebar nav{
  position: absolute;
  width: 70px;
  margin-top: 125px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
}
.sidebar nav li{
  height: 60px;
  position:relative;
}
.sidebar nav li a{
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  padding-left:25%;
  border-bottom: 1px solid rgba(0,0,0,.4);
  transition: all .3s linear;
}

.sidebar nav li a i{
  position:absolute;
  top: 17px;
  left: 20px;
  font-size: 27px;
}
ul li a span{
  display: none;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sidebar a:hover {
  z-index:1;
  width: 300px;
  border-bottom: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
  
}
.sidebar ul li:hover a span{
  padding-left: 30%;
  display: block;
}

tried setting text-center, align-items properties didnt work

Answer 1

So The first thing I did was to add float:inline-end; to our .Sidebar{} and removed position:fixed; from our nav selector.

(my own first instinct was to use flexbox, but that's just me.)

This will make your sidebar float on the right side of the screen and your nav is just housed in it.

Then to change the direction of our animation, we change padding-left:20% of .Sidebar ul li:hover a span{} to padding-right:20% and add float:inline-end to .Sidebar nav li a{}.

And that's pretty much it I think.

I didn't have to touch our html code so here's what I ended up with in the stylesheet:

@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

body {
    background-color: black;
}
.sidebar *{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar {
    display:inline;
    float: inline-end;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
}
.sidebar nav{
  
  width: 70px;
  margin-top: 150px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
  
}
.sidebar nav li{
  height: 60px;
  position:relative;
}
.sidebar nav li a{
  color: white;
  display: block;
  float: inline-end;
  height: 100%;
  width: 100%;
  line-height: 60px;
  
  border-bottom: 1px solid rgba(0,0,0,.4);
  transition: all .3s linear;
}

.sidebar nav li a i{
  position:absolute;
  float: inline-end;
  top: 17px;
  left: 20px;
  font-size: 27px;
}
ul li a span{
    display: none;

  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sidebar a:hover {
  z-index:1;
  width: 300px;
  border-bottom: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
}
.sidebar ul li:hover a span{

  padding-right:20%;
  display: block;

} ```