title: How to align the menu to the right side of the desktop?
body: <p>I am have a menu for my website and which is currently align on the left side of the browser. I am try to align on the right side of the browser.</p>
  
  <p><strong>here is the demo:</strong> <a href="https://app.clickfunnels.com/for_domain/businesswealthcoach.clickfunnels.com/optin?updated_at=50ad6cd4f6bfdb311282b75af59e07c1v2&amp;track=0&amp;preview=true" rel="nofollow noreferrer">here</a></p>
  
  <p>what I want is just put the hole menu and align it on the right side of the browser screen. currently its showing on the left side.</p>
  
  <p><strong>trying to do:</strong><a href="https://i.stack.imgur.com/D0y00.png" rel="nofollow noreferrer">https://i.stack.imgur.com/D0y00.png</a></p>
  
  <p><strong>html code:</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
  
  
  &lt;header&gt;
      &lt;span class="toggle-button"&gt;
          &lt;div class="menu-bar menu-bar-top"&gt;&lt;/div&gt;
          &lt;div class="menu-bar menu-bar-middle"&gt;&lt;/div&gt;
          &lt;div class="menu-bar menu-bar-bottom"&gt;&lt;/div&gt;
      &lt;/span&gt;
      &lt;div class="menu-wrap"&gt;
          &lt;div class="menu-sidebar"&gt;
              &lt;ul class="menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="children"&gt;&lt;a href="#"&gt;News&lt;/a&gt;
                      &lt;span class="arrow"&gt;&lt;/span&gt;
                      &lt;ul class="child-menu "&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;link 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="children"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
                      &lt;span class="arrow"&gt;&lt;/span&gt;
                      &lt;ul class="child-menu "&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;link 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li class="children"&gt;&lt;a href="#"&gt;About&lt;/a&gt;
                      &lt;span class="arrow"&gt;&lt;/span&gt;
                      &lt;ul class="child-menu "&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;link 3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;           
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  &lt;div class="wrapper" style="background-color:;padding:15px;"&gt;
      &lt;section class="text"  style="background-color:;"&gt;
          &lt;h2 class="heading" id="headings" style="background-color:;text-align:center;"&gt;Three Line Menu &amp; CSS Transitions&lt;/h2&gt;
  
          &lt;p class="buttons" style="min-width: 200px;margin:auto;background-color:;text-align:center;"&gt;
                &lt;a href="#"  style="background-color:;" class="btn_one"&gt;Learn More&lt;/a&gt;
  
          &lt;/p&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>html {
  
  
          background: url(https://s33.postimg.cc/tm1vd9yy7/Background_2.jpg);
          background-attachment:fixed;
          background-repeat: no-repeat;
          background-size: cover;  
  
       }
  
  .btn_one {
  
  text-decoration: none;
  color: white;
  font-weight: 100;
  border: 1px #fbbc05 solid;
  padding: 1em 3em;
  border-radius: 100px;   
  }
  
  a {
  text-decoration: none;
  }
  ul {
    padding-left: 0;
  }
  li {
  list-style: none;
  }
  * {
  box-sizing: border-box;
  }
  body {
  font-family: 'Montserrat', Arial, serif;
  }
  ::selection {
  background-color: #EBEBF2;
  color: #83828D;
   }
  
  
  /* ==================================== */
    /*      Navigaton Menu        */
  /* ==================================== */
  
  .menu-wrap {
   background-color: #625871;
  position: fixed;
  top: 0;
  height: 100%;
  width: 280px;
  margin-left: -280px;
  font-size: 1em;
  font-weight: 700;
  overflow: auto;
  transition: .25s;
  z-index: 10;
  }
  .menu-show {
  margin-left: 0;
  box-shadow: 4px 2px 15px 1px #262424;
  }
  
  
  
  .menu-sidebar {
  margin: 75px 0 80px 10px;
  position: relative;
  top: 70px;
  }
  .menu-sidebar li {
  padding: 18px 22px 0;
  }
  .menu-sidebar li &gt; a {
  color: #f3f3f3;
  font-size: 1.18em;
  position: relative;
  }
  .menu-sidebar li &gt; a::after {
  content: "";
  display: block;
  height: 0.15em;
  position: absolute;
  top: 100%;
  width: 100%;
  left: 50%;
  transform: translate(-50%);
  background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
  transition: background-position .2s .1s ease-out;
  background-size: 200% auto;
  }
  .menu-sidebar li &gt; a:hover::after {
  background-position: -100% 0;
  }
  .menu-sidebar .children {
  position: relative;
  }
  .menu-sidebar .children .child-menu {
  display: none;
  }
  .arrow::after {
  content: "\f107";
  font-family: 'FontAwesome';
  padding: 10px;
  color: #FFFA3B;
  position: relative;
  }
  .arrow:hover::after {
  cursor: pointer;
  color: #fff;
  }
  .arrow:active::after {
  top: 2px;
  }
  
  
   /*Hamburger Button*/
  .toggle-button {
  position: fixed;
  width: 44px;
  height: 40px;
  top: 50px;
  left: 40px;
  padding: 4px;
  transition: .25s;
  z-index: 15;
  }
  .toggle-button:hover {
  cursor: pointer;
  }
  
  .toggle-button .menu-bar {
  position: absolute;
  border-radius: 2px; 
  transition: .5s;
  }
  .toggle-button .menu-bar-top {
  border: 4px solid #fff;
  border-bottom: none;
  top: 0;
  width: 80%;
  }
  .toggle-button .menu-bar-middle {
  height: 4px;
  background-color: #fff;
  margin-top: 7px;
  margin-bottom: 7px;
  width: 40%;
  top: 4px;
  }
  .toggle-button .menu-bar-bottom {
  border: 4px solid #fff;
  border-top: none;
  top: 22px;
  width: 60%;
  }
  .toggle-button:hover div 
  {
  width: 80%;
  }
  
  
  
  
  .button-open {
  left: 25px;
  }
  .button-open .menu-bar-top {
  border-color: #fff;
  transform: rotate(45deg) translate(8px, 8px);
  transition: .5s;
  }
  .button-open .menu-bar-middle {
  background-color: #fff;
  transform: translate(230px);
  transition: .1s ease-in;
  opacity: 0;
  }
  .button-open .menu-bar-bottom {
  border-color: #fff;
  transform: rotate(-45deg) translate(7px, -7px);
  transition: .5s;
  }
  
  
  
  /* Text Block */
  .wrapper {
  width: 40%;
  margin: 100px auto 0;
  color: #83828D;
   }
  .wrapper .text {
  padding: 30px;
   }
  .wrapper .text .heading {
  margin-bottom: 40px;
  font-size: 2em;
  color:#fff;
    }
   .wrapper .text p {
  line-height: 1.6em;
    }
    .wrapper .text .buttons {
  margin-top: 40px;
    }
  
  /* Buttons */
  .wrapper .buttons .button {
  display: inline-block;
  margin-right: 20px;
  padding: 20px 25px;
  border-radius: 2em;
  background-color: #70CE64;
  color: #fff;
  font-size: .9em;
  font-weight: 700;
  transition: background-color .3s;
    }
   .wrapper .buttons .button-secondary {
  background-color: #FF6746;
    }
   .wrapper .buttons .button-primary:hover {
   background-color: #84D07A;
    }
    .wrapper .buttons .button-secondary:hover {
    background-color: #FF7D60;
   }
  
    /*Active state for the buttons*/
  
      .wrapper .buttons .button-primary:active {
        background-color: #70CE64;
    }
     .wrapper .buttons .button-secondary:active {
        background-color: #FF6746;
     }
  
  /*Icons*/
  .wrapper .buttons .button span {
  position: relative;
  display: inline-block;
  padding-right: 20px;
  }
  .wrapper .buttons .button span::after {
  position: absolute;
  font-family: "FontAwesome";
  right: -3px;
  font-size: 14px;
  top: 0;
  transition: top .3s, right .3s;
  }
  .wrapper .buttons .button-primary span::after {
  content: "\f019";
    }
   .wrapper .buttons .button-secondary span::after {
  content: "\f178";
   }
    /*Slight icons animation*/
      .wrapper .buttons .button-primary:hover span::after {
      top: 4px;
       }
    .wrapper .buttons .button-secondary:hover span::after {
  right: -6px;
   }
  
   @media screen and (max-width: 480px) {
  
  #headings{
  margin-bottom:20px;
  font-size: 18px;
  color:#fff;
  }
  
  .btn_one {
  text-decoration: none;
  color: #fff;
  font-size:12px;
  font-weight: 100;
  border: 1px #fbbc05 solid;
  padding: 8px 23px;
  border-radius: 100px;
  }
  
  ul {
  padding-left: 35px;
  }
  .menu-sidebar li
  {
  padding:0;
  }   
  
  .menu-wrap {
  
  width: 200px;
  
  }   
  
  }
  </code></pre>
  
  <p><strong>SCRIPT:</strong></p>
  
  <pre><code>$(document).ready(function() {
  
  var $toggleButton = $('.toggle-button'),
      $menuWrap = $('.menu-wrap'),
      $sidebarArrow = $('.arrow');
  
  // Hamburger button
  
  $toggleButton.on('click', function() {
      $(this).toggleClass('button-open');
      $menuWrap.toggleClass('menu-show');
  });
  
  // Sidebar navigation arrows
  
  $sidebarArrow.click(function() {
      $(this).next().slideToggle(300);
  });
  
  });
  </code></pre>
  
  <p><strong>Here is the source code for reference</strong>: <a href="https://nofile.io/f/9bKHsuOoUza/source_code_new.zip" rel="nofollow noreferrer">https://nofile.io/f/9bKHsuOoUza/source_code_new.zip</a></p>
  
  <p>Can anybody guide me? Any input is appreciated.
  Thank you so much.</p>