I am having some trouble styling a form with CSS. I want to apply specific formatting to the form without affecting other parts of my website. Specifically, I need to add spacing between input fields, labels, and buttons within the form. I suspect that one of the 20 CSS files in my project is overriding my styles. Is there a way to override these conflicting styles and apply them specifically to the "box-body" class?
<!-- 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 -->
Current layout: current view
Desired layout for box body: desired view
/* Styling for To Do List */
.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;