improper addition <li>

by alexwald

HTML

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>Graphing using PHP</title>
<!-- <link rel="stylesheet" type="text/css" href="css/normalize.css"/> -->
<link rel="stylesheet" type="text/css" href="css/layout.css"/>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
    <script>!window.jQuery && document.write('<script src="scripts/jquery.js"><\/script>')
    </script>
    <script src="scripts/jquery.lint.js"></script>
            <script type="text/javascript" src="scripts/jscolor/jscolor.js"></script>
        <!--    <script type="text/javascript" src="scripts/jquery-ui.js"></script>-->
</head>    
<body>
    

<div class="container">
<!--    <form action="process.php" method="POST"> -->
    <form action="pie.php" method="POST">
<!--    <form action="xml.php" method="POST"> -->
<!--    <form action="bar.php" method="POST"> -->
    <ul id="formulario">
    
<!-- form line begins -->
                <li class="form_line" id="line0">
                    
                        <span>
                            <label for="item0">Item: </label>
                            <input type="text" required="required"
                            placeholder="what item is this?" autofocus="item" name="item[]" id="item[]">
                            </span>
                            <span>
                            <label for="amount0">Amount: </label>
                            <input required="required"  type="number" name="amount[]" id="amount0">
                            </span>
                            <span>
                            <label for="color0">Color: </label>
                            <input type="text" required="required"  class="color {pickerClosable:true, hash:true ,pickerFaceColor:'#ee5588',pickerFace:3,pickerBorder:0,pickerInsetColor:'black'}" id="color0" name="color[]">
                            </span>
            
                </li>
<!-- end of form line -->

<!-- form line...

CSS

* { margin: 0; padding: 0; outline: none; } 

@font-face {
    font-family: 'Pacifica';
    src: url('fonts/pacifica.otf?'),
         url('fonts/pacifica.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('fonts/League_Gothic-webfont.eot?') format('eot'),
         url('fonts/League_Gothic-webfont.woff') format('woff'),
         url('fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('fonts/League_Gothic-webfont.svg#webfont1Lb5Pdit') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { 
    font-size: 15px; color: #444; border-top: 3px solid #ee5588; overflow: auto;
    background: #eee /*url(../images/bg.gif)*/; font-family: Trebuchet MS; 
    text-align: center;
/*    position: relative;*/
}
.container{
   /* margin: 0 auto;
    width: 800px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);*/
   text-align: center; 
   width: 850px;
   margin: 0 auto; 
/*   position: relative;*/
}
.controls{
   /* margin: 0 auto;
    width: 800px;
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);*/
   text-align: center; 
   width: 80px;
   height: 160px;
   margin: 0 auto; 
   position: fixed;
   left:20px;
   top:120px;
   margin: 30px auto;
   padding: 25px;
   border: 1px solid rgba(0,0,0,0.5);
   border-radius: 25px 0px 25px 0px;
   background: rgba(0,0,0,0.25);
   box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
   -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px...