html - CSSヘッダー画像「積み上げ」

Question

私は自分のウェブサイトでこの問題をしばらく抱えていたので、写真を使用したヘッダーに取り組んでいましたが、すべてうまくいっています。カーソルを合わせると写真が変わりますが、「ホーム」「ニュース」「ログイン」を配置した後" "登録" と "連絡先" が隣り合っているのではなく、次のように積み上げられていることに気付きました。

CSS コーディング: #menubar { width: 50%; マージン: 0 自動 0 自動; }

.home {
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 0 0;
}
.home:hover {
    background-position: 0 100;
}
/***************************************************/
.news {
display: block;
    width: 240px;
height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: -240 top;
}
.news:hover {
    background-position: -240 bottom;
} 
/***************************************************/
.register {
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 480 top ;
}
.register:hover {
    background-position: 480 bottom;
}

/***************************************************/
.play { /*login*/
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 720 top;
}
.play:hover {
    background-position: 720 bottom;
}

/***************************************************/
.contact {
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 240 top ;
}
.contact:hover {
    background-position: 240 bottom;
}

/***************************************************/

HTMLコーディング