Ciao gente,

sono un nuovo utente, mi sto esercitando con html rifacendo esercizi e giochini che facevo al tempo con VB6.

Sto cercando di spaziare orizzontalmente 3 <div> allo stesso modo in cui ho spaziato orizzontalmente 3 <input> ma non mi riesce, in quanto i margini degli input non si sovrappongono tra loro, mentre i margini dei div invece si.

Vi allego il codice completo: è codice che si basa su jQuery UI, ma ritengo che il mi problema sia solo CSS.

codice HTML:
<!doctype html><html lang="us">    <head>        <meta charset="utf-8">        <title>Colors</title>        <link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.css">        <script src="jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>        <script src="jquery-ui-1.11.4.custom/jquery-ui.js"></script>    </head>        <body>            <div id="container">            <div id="sliders">        <div id="red_slider"></div>        <div id="green_slider"></div>                <div id="blue_slider"></div>            </div>                        <div id="inputs">        <input id="red_input"></input>        <input id="green_input"></input>        <input id="blue_input"></input>            </div>                    <div id="panel"></div>        </div>            <style>            #container {  }            #sliders { height:200px; float:left; width:40%; margin:0 30px 0 20px; }            #sliders div { margin:38px 0 10px 0; }            #sliders div .ui-slider-handle { background-color:black; border-radius:50%; width:24px; height: 24px; }            #sliders div.ui-slider-horizontal { height:17px; }            #inputs { height:200px; float:left; width:5%; }            #inputs input { width:40px; margin:33px 0 10px 0; padding:0 1px 0 1px; position: relative; }            #panel { float:left; border:1px solid; width:35%; height:200px; background-color:black; }        </style>                <script>            $(function() {                var red=0;                var green=0;                var blue=0;                        $("#red_input").val(0)                $("#green_input").val(0)                $("#blue_input").val(0)                                $("#red_slider").slider({                    min: 0,                    max: 255,                    slide: function( event, ui ) {                        change_red_color(ui.value);                        $("#red_input").val(ui.value)                    }                });                $("#green_slider").slider({                    min: 0,                    max: 255,                    slide: function( event, ui ) {                        change_green_color(ui.value);                        $("#green_input").val(ui.value)                    }                });                $("#blue_slider").slider({                    min: 0,                    max: 255,                    slide: function( event, ui ) {                        change_blue_color(ui.value);                        $("#blue_input").val(ui.value)                    }                });                $("#red_input").on('input',function(){                    change_red_color(this.value);                    $("#red_slider").slider( "value", this.value );                });                $("#green_input").on('input',function(){                    change_green_color(this.value);                    $("#green_slider").slider( "value", this.value );                });                $("#blue_input").on('input',function(){                    change_blue_color(this.value);                    $("#blue_slider").slider( "value", this.value );                });                                function change_red_color(value) {                    red = value;                    $("#panel").css('background-color','rgb('+red+','+green+','+blue+')');                    $("#red_slider .ui-slider-handle").css('background-color','rgb('+red+',0,0)');                }                function change_green_color(value) {                    green = value;                    $("#panel").css('background-color','rgb('+red+','+green+','+blue+')');                    $("#green_slider .ui-slider-handle").css('background-color','rgb(0,'+green+',0)');                }                function change_blue_color(value) {                    blue = value;                    $("#panel").css('background-color','rgb('+red+','+green+','+blue+')');                    $("#blue_slider .ui-slider-handle").css('background-color','rgb(0,0,'+blue+')');                }         });        </script>
    </body></html>
Io voglio allineare perfettamente i div "sliders" agli inputs ma non mi riesce.
Riuscite a spiegarmi cosa sbaglio?

Grazie!