css - 全体的なコード構造の失敗

Question

HTML と CSS から始めて、友人のために最初のページを書きました。問題は、コードがかなり悪いように見えることです。いくつか変更しようとすると、ページ全体がほとんどクラッシュします。

私のページの地図: http://i.stack.imgur.com/0U1lO.png

だからここにあります：

1. ロゴ + ナビゲーション メニュー

コードは次のとおりです。

#logo {
 margin-left: 15%; }

nav {
 float: left;
 margin-left: 10%;
 margin-top: 1%;
 font-weight: bold;
 vertical-align: central; }

a {
 text-decoration: none; }

nav ul {
 list-style-type: none; }

nav li {
 float: left;
 margin-right: 10px;

}

1. スライダーは私が思うにうまくできた唯一のものです。
2. ここから楽しみが始まります：

ニュースコード:

 .newsy {
 font-weight: 900;
 font-size: xx-large;
 margin-left: 15%;
 color: black; }


.image-box {
 position: relative;
 margin-left: 15%;
 width: 640px;
 height: 300px; }

 .image-box span {
     position: absolute;
     bottom: 0;
     left: 0;
     background: rgba(0,0,0, .5);
     color: white;
     padding: 15px;
 }


.community-box {
 margin-right: 15% ;
 float: right;
 }

.baner-box {
 float: right;
 width: 270px;
 height: 500px;
 margin-right: 15%; }

 .baner-box baner {
     margin: 40px;
 }

 .autor {
 border: solid 0px white;
 background-color: white;
 margin-left: 15%;
 padding: 10px;
 padding-left: 20px;
 width: 610px;
 background-color: white;
 position: relative;
 font-weight: bolder;
 font-size: 13px;
 font-kerning: normal; }

 .readmore {
 position:absolute;
 bottom: 0;
 right: 0;
 width: 90px;
 padding: 10px;
 padding-left: 20px;
 background-color: rgba(0,0,0, .9);
 color: white;

 }

それらを中央から少し左に移動しようとすると、ページ全体がクラッシュします。また、コミュニティ ボックス (Facebook、YT、Twitter) が適切に設定されていません。

誰が私を助けて、私が犯した過ちを言うことができますか? それは本当に重要です。挨拶します。

PSコード全体が必要な場合は、そのパッケージをアップロードできます。