title: issue placing my div as I want
body: <p>I want to place the two boxes a bit more to the left or a bit more to the bottom as I want, but when I fix to the style <code>left:20px;</code>, it doesn't change anything. </p>
  
  <p>I took this sample from <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_todo" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_todo</a>. I could make these tables/boxes smaller, but as I want to position them where I want in a page it doesn't change. Is there a problem with the CSS?</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>// Create a "close" button and append it to each list item
  var myNodelist = document.getElementsByTagName("LI");
  var i;
  for (i = 0; i &lt; myNodelist.length; i++) {
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    myNodelist[i].appendChild(span);
  }
  
  // Click on a close button to hide the current list item
  var close = document.getElementsByClassName("close");
  var i;
  for (i = 0; i &lt; close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
  
  // Create a new list item when clicking on the "Add" button
  function newElement1() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput1").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
      alert("You must write something!");
    } else {
      document.getElementById("myUL1").appendChild(li);
    }
    document.getElementById("myInput1").value = "";
  
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);
  
    for (i = 0; i &lt; close.length; i++) {
      close[i].onclick = function() {
        var div = this.parentElement;
        div.style.display = "none";
      }
    }
  }
  
  function newElement2() {
     var li = document.createElement("li");
     var inputValue = document.getElementById("myInput2").value;
     var t = document.createTextNode(inputValue);
     li.appendChild(t);
     if (inputValue === '') {
       alert("You must write something!");
     } else {
       document.getElementById("myUL2").appendChild(li);
     }
     document.getElementById("myInput2").value = "";
  
     var span = document.createElement("SPAN");
     var txt = document.createTextNode("\u00D7");
     span.className = "close";
     span.appendChild(txt);
     li.appendChild(span);
  
     for (i = 0; i &lt; close.length; i++) {
       close[i].onclick = function() {
         var div = this.parentElement;
         div.style.display = "none";
       }
     }
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: auto;
    min-width: 250px;
  }
  
  /* Include the padding and border in an element's total width and height */
  * {
    box-sizing: border-box;
  }
  
  /* Remove margins and padding from the list */
  ul {
    margin: 0;
    padding: 0;
  }
  
  /* Style the list items */
  ul li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    list-style-type: none;
    background: #eee;
    font-size: 18px;
    transition: 0.2s;
    
    /* make the list items unselectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Set all odd list items to a different color (zebra-stripes) */
  ul li:nth-child(odd) {
    background: #f9f9f9;
  }
  
  /* Darker background-color on hover */
  ul li:hover {
    background: #ddd;
  }
  
  /* When clicked on, add a background color and strike out text */
  ul li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
  }
  
  
  
  /* Style the close button */
  .close {
    position: absolute;
    right: 0px;
    top: 0;
    padding: 12px 16px 12px 16px;
  }
  
  .close:hover {
    background-color: #f44336;
    color: white;
  }
  
  /* Style the header */
  .header {
    background-color: grey;
    padding: 30px 40px;
    color: white;
    text-align: center;
  }
  
  /* Clear floats after the header */
  .header:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Style the input */
  input {
    border: none;
    width: 75%;
    padding: 10px;
    float: left;
    font-size: 16px;
  }
  
  /* Style the "Add" button */
  .addBtn {
    padding: 10px;
    width: 25%;
    background: #d9d9d9;
    color: #555;
    float: left;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
  }
  
  .addBtn:hover {
    background-color: #bbb;
  }
  
  .footer {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myDIV" class="header" style="background-color: #000000;  width: 500px;"&gt;
    &lt;h2 style="margin:5px"&gt;Primary tag&lt;/h2&gt;
    &lt;input type="text" id="myInput1" placeholder=""&gt;
    &lt;span onclick="newElement1()" class="addBtn"&gt;Add&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;ul id="myUL1" style="width: 500px;"&gt;
  &lt;/ul&gt;
  
  &lt;br&gt;&lt;br&gt; &lt;br&gt;&lt;br&gt; &lt;br&gt; &lt;br&gt;
  &lt;div id="myDIV" class="header"  style="width: 500px;"&gt;
    &lt;h2 style="margin:5px"&gt;Secondary tags&lt;/h2&gt;
    &lt;input type="text" id="myInput2" placeholder=""&gt;
    &lt;span onclick="newElement2()" class="addBtn"&gt;Add&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;ul id="myUL2" style="width: 500px;"&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>