Review for CSS layout code I want to get my first CSS layout reviewed.
First of all, the related HTML code is as follows -

&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;title&gt; Preferences &lt;/title&gt;

        &lt;script src="options.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="options.css" /&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;h1&gt; Search in New Tab - Preferences &lt;/h1&gt;
        &lt;form id="preference-form"&gt;
                &lt;label for="search-engine"&gt; Search Engine &lt;/label&gt;
                &lt;select id="search-engine"&gt;
                    &lt;option id="google" value="google" selected="selected"&gt; Google &lt;/option&gt;
                    &lt;option id="bing" value="bing"&gt; Bing &lt;/option&gt;
                    &lt;option id="yahoo" value="yahoo"&gt; Yahoo! &lt;/option&gt;
                    &lt;option id="duckduckgo" value="duckduckgo"&gt; DuckDuckGo &lt;/option&gt;
                    &lt;option id="wikipedia" value="wikipedia"&gt; Wikipedia &lt;/option&gt;
                &lt;/select&gt;

                &lt;br&gt;

                &lt;label for="focus-search-tab"&gt; Make the search tab active &lt;/label&gt;
                &lt;input type="checkbox" value="focus-search-tab" id="focus-search-tab" /&gt;
        &lt;/form&gt;     
    &lt;/body&gt;
&lt;/html&gt;


I wrote the following CSS file in order to provide satisfactory presentation to the HTML -

h1
{
    width : 40%;
    background : #eeeeee;
    box-shadow : 0 0 5px 5px #888;
    margin-top : 10%;
    margin-left : 30%;
    margin-right : 30%;
    padding-top : 10px;
    padding-bottom : 10px;
    text-align : center;
    font-family : "Arial", "Century Gothic", "Lucida Sans Unicode";
}

form
{
    width : 30%;
    background : #eeeeee;
    box-shadow: 0 0 5px 5px #888;
    margin-top : 1%;
    margin-left : 35%;
    margin-right : 35%;
    padding-top : 10px;
    padding-bottom : 10px;
}

label
{
    width : 60%;
    display : inline-block;
    text-align : right;
    margin-top : 10px;
    margin-bottom : 10px;
    margin-right : 10px;    
    font-family : "Arial";
}


The resulting HTML document looks like this:



Basically, I wanted to avoid the use of float property. I felt that I could accomplish the same by using combinations of inline-block property, padding and margins. So, I used that. Was that the right way?
Other than that, I would like to know if I did things right. Also, any improvements that make my CSS code better are welcome.
I'm no CSS expert, but two things I would change are:


remove unnecessary spaces (indenting and in ' : ').
condense explicit margin-top, margin-left etc (and padding):

h1{
width:40%;
background:#eee;
box-shadow:0 0 5px 5px #888;
margin:10% 30% 0 30%;
padding:10px 0 10px;
text-align:center;
font-family:"Arial", "Century Gothic", "Lucida Sans Unicode";
}

form{
width:30%;
background:#eee;
box-shadow: 0 0 5px 5px #888;
margin:1% 35% 35%;
padding:10px 0 10px;
}

label{
width:60%;
display:inline-block;
text-align:right;
margin:10px 10px 10px;
font-family:"Arial";
}