title: Sidebar Push Not Working
body: <p>I have the sidebar below, and what it's supposed to do is that when it is opened, it will push the items to the side, but it doesn't work. Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function allowDrop(ev) {
      ev.preventDefault();
  }
  
  function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
  }
  
  function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
  }
  
  function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
  }
  
  function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1, #div2, #div3, #div4 {
   float: left;
      width: 55px;
      height: 55px;
      margin: 10px;
      border: 1px solid black;
  }
  
  body {
      font-family: "Lato", sans-serif;
  }
  
  .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
  }
  
  .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s
  }
  
  .sidenav a:hover, .offcanvas a:focus{
      color: #f1f1f1;
  }
  
  .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
  }
  
  #main {
      transition: margin-left .5s;
      padding: 16px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  
    &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDBBSFnyl2fRlVY1ct1E6t5rUIFsu8JWmKeTrS9o1nnTigCOfI2g" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
  &lt;div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
  &lt;div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  
  &lt;div id="mySidenav" class="sidenav"&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
    &lt;a href="#"&gt;Item 1&lt;/a&gt;
    &lt;a href="#"&gt;Item 2&lt;/a&gt;
    &lt;a href="#"&gt;Item 3&lt;/a&gt;
    &lt;a href="#"&gt;Item 4&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="main"&gt;
    &lt;span style="font-size:30px;cursor:pointer" onclick="openNav()"&gt;&amp;#9776; open&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Although, my code doesn't push the <code>div</code>s and the <code>image</code> to the side. How can I do this?</p>