Adding a div with CSS to DOM

For a project, I am building an app that gets user input, stores it in an array, and displays the input in the DOM. I did the first two parts but I am having trouble displaying it. More specifically, I can't get the CSS to show up.

I have tried .createElement() which creates a new list-item but it does not include CSS. I am starting to think I am completely going about this incorrectly. If you need more information or code let me know.

\\HTML

<div id="boxhold">
 <ul>
  <li>
   <div class="twogrid">
    <h1>Fruit Juice</h1>
    <p>50</p>
   </div>
  </li>
 </ul>
</div>

\\CSS

#boxhold {
margin: 0 auto;
ul {
    list-style-type: none;
    padding: 0;
    li {
        margin: 0 auto;
        width: 408px;
        height: 75px;
        border: 3px solid $prime-color;
        h1 {
            font-family: $header-font;
            font-weight: $header-weight;
            font-size: 1em;
        }
        p {
            font-family: $header-font;
            font-weight: $header-weight;
        }
    }
  }
}

\\JS
//Get Data

//Empty array for storing
var added = [];

//Get Data
var userInput = function() {
    return {
        name: document.getElementById('name').value,
        amount: document.getElementById('amount').value
    }    
};


// Store Data
var newSugar = function(){
    return added.push(userInput());
}

// New HTML
function newBox() {
    var newLi = document.createElement('li');

    var newName = document.getElementById('name').value;
    var n = document.createTextNode(newName);
    newLi.appendChild(n);

    var newAmount = document.getElementById('amount').value;
    var a = document.createTextNode(newAmount);
    newLi.appendChild(a);

    var boxhold = document.getElementById('boxhold').getElementsByTagName('ul')[0];

    document.body.appendChild(newLi);    
};

//Adding stuff

 var displayData = (function() {

    var addInput = function() {
        var data = userInput();
        var item = newSugar();
        var box = newBox();
        //var box = newItem();
    };


    var addFood = document.getElementById('addFood');
    addFood.addEventListener('click', addInput);

    document.addEventListener('keypress', function(event) {
            if (event.keyCode === 13 || event.which === 13) {
                addInput();
            }
        });    
})(userInput, newSugar, newBox);