CSS Classes same line

I am making a css menu... with classes I wanna that the menu be like this:

http://i.stack.imgur.com/oU9ii.png

But the menu is like this:

http://i.stack.imgur.com/nK0Jq.png

That is the code that I am using:

.deviantart {
    display:block; 
    margin:0% auto;
    width: 100px;
    height: 100px;
    display: block;
    background-image : url(images/social/deviantart.png);
    background-repeat: no-repeat;
    background-size:100%;
    -webkit-transition: -webkit-transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
}
a.deviantart:hover {
    -webkit-transform: rotateZ(360deg);
     -moz-transform: rotateZ(360deg);
        trans开发者_运维百科form: rotateZ(360deg);
}
a.twitter {
    display:block; 
    margin:10px auto;
    width: 100px;
    height: 100px;
    display: block;
    background-image : url(images/social/twitter.png);
    background-repeat: no-repeat;
    background-size:100%;
    -webkit-transition: -webkit-transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
}
a.twitter:hover {
    -webkit-transform: rotateZ(360deg);
     -moz-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
}

I wanna make the itens(classes) in the same line, can you help-me ?

---

Try

float: left;

or

display: inline-block

on the elements (boxes) you want to line up.

---

CSS:

#left { background:black; width: 100px; height: 100px; float:left; margin-right:20px;}
#middle { background:black; width: 100px; height: 100px; float:left; margin-right:20px;}
#right { background:black; width: 100px; height: 100px; float:left;}

HTML:

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>