Applying css to a single element, classes don't work

Question

I am trying to add a CSS to a form which has different formatting from the rest, however, if I add a separate style.css file, it applies to the entire web site which I don't want. I need to add spaces between the input fields, labels, and buttons. I'm not sure which CSS file is overriding as I have about 20 of them. Is there any way to override it and apply it to to the class "box-body"

<!-- To Do List -->
        <div class="col-lg-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">To Do List</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data- 
                        widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data- 
                        widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>

                <div class="box-body">

            <!-- <link href='https://fonts.googleapis.com/css? 
               family=Lato:300,400,700' rel='stylesheet' type='text/css'> ->

            <p>
                <label for="new-task">Add Item</label><input id="new-task" 
            type="text"><button>Add</button>
            </p>

            <h3>To Do</h3>
            <ul id="incomplete-tasks">
                <li><input type="checkbox"><label>Pay Bills</label><input 
                type="text"><button class="edit">Edit</button><button 
                class="delete">Delete</button></li>
                <li class="editMode"><input type="checkbox"><label>Go 
                  Shopping</label><input type="text" value="Go Shopping"> 
                  <button class="edit">Edit</button><button 
                   class="delete">Delete</button></li>

               </ul>

                <h3>Completed</h3>
                <ul id="completed-tasks">
                <li><input type="checkbox" checked><label>See the 
                Doctor</label><input type="text"><button 
               class="edit">Edit</button>
            <button class="delete">Delete</button></li>
            </ul>

            <script type="text/javascript" src="app.js"></script>
            <script  src="js/index.js"></script>
        </div>
        </div>

    </div>
    <!-- /.container-fluid -->



     </section>
      <!-- /.content -->
         </div>
            <!-- /.content-wrapper -->

What I have currently: currently

What the box body should look like: should look like

 /* To do List CSS*/

.containerToDo {
display: block;
width: 400px;
margin: 100px auto 0;
}

.box-body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}

ul {
margin: 0;
padding: 0;
}

li * {
float: left;
}

li, h3 {
clear:both;
list-style:none;
}

input, button {
outline: none;
}

button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}

button:hover {
color: #333;
}

/* Heading */

h3,
label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 10px;
text-transform: uppercase;
}

input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
}

input[type="text"]:focus {
color: #333;
}

/* New Task */

label[for='new-task'] {
display: block;
margin: 0 0 20px;
}

input#new-task {
float: left;
 width: 318px;
}

p > button:hover {
color: #0FC57C;
}

/* Task list */

li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}

li > input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}

li > label {
font-size: 18px;
line-height: 40px;
width: 237px;
padding: 0 0 0 11px;
}

li >  input[type="text"] {
width: 226px;
}

li > .delete:hover {
color: #CF2323;
}

/* Completed */

#completed-tasks label {
text-decoration: line-through;
color: #888;
}

/* Edit Task */
ul li input[type=text] {
display:none;
}

ul li.editMode input[type=text] {
display:block;
}

ul li.editMode label {
display:none;
}

.input#new-task{
margin-left: 20px;
padding:20px;

Answer 1

You can do something like this, Create a separate html file with .box-body div & style you want at the top. The file would be something like this (this is just a rough idea),

<style>

.box-body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}

</style>

<div class="box-body">

           <link href='https://fonts.googleapis.com/css? 
               family=Lato:300,400,700' rel='stylesheet' type='text/css'> ->

            <p>
                <label for="new-task">Add Item</label><input id="new-task" 
            type="text"><button>Add</button>
            </p>

            <script type="text/javascript" src="app.js"></script>
            <script  src="js/index.js"></script>

</div>

Let's say the name of the file is box-body.html. Come to main page & remove .box-body div & add this,

<div id="box-body"></div>

Then add this before </body> at the bottom of the main code,

<script>
      $('#box-body').load('./box-body.html');
</script>

Answer 2

For each selector prepend .box-body, like .box-body button.