Содержимое смешалось?

Question

djoulin @djoulin

CSS

Содержимое смешалось?

Я в веб-разработки нулевый, и этот сайт мой первый. И вот что-то я тут напутал и стили слиплись вместе при уменьшение окна в браузере.

Скриншот:

Сам код:

<title>Djoulin | Профиль</title>
    <!--Стили-->
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/contents.css">
    <!--Box-->
    <div id="header">
        <a href="/">
        <img src="logo.png" class=logotype>
    </a>
    </div>

    <!--Context-->
    <div id=back></div>
    <div id=avatar></div>
    <div id=status></div>
    <a class="b1" href="http://djoulin.jox/friends.php">Друзья</a>
    <a class="b2" href="http://djoulin.jox/photo.php">Фотографии</a>
    <a class="b2" href="http://djoulin.jox/groups.php">Сообщества</a>
    <a class="b2" href="http://djoulin.jox/video.php">Видео</a>
    <a class="b2" href="http://djoulin.jox/game.php">Игры</a>

    <a class="b2" href="http://djoulin.jox/record.php">Записи</a>
    <a class="b3" href="">+</a>
    <div id="bords"></div>
    <div id=bord-status></div>

    <div id=info></div>
    <div id=gallery></div>
    <div id=new></div>
    <div id=posts></div>
    <div id=friends></div>

.b1{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 550;
    margin-left: 545px;
    margin-right: auto;
    transition: 1s;
    display: inline-block;
    text-decoration: none;
    background-color: #ffffff;
    color: #027ffd;
    border: 0px solid #006089;
    border-radius: 0px;
    font-size: 16px;
    padding: 13px 17px; 
    transition: all 0.0s ease;
}
.b1:hover{
    text-decoration: none; 
    background-color: #D1D7DE;
    color: #027ffd;
    opacity:1;
    transition: 1s;
    border-color: #006089;
}

.b2{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 550;
    margin-left: 27px;
    margin-right: auto;
    transition: 1s;
    display: inline-block;
    text-decoration: none;
    background-color: #ffffff;
    color: #027ffd;
    border: 0px solid #006089;
    border-radius: 0px;
    font-size: 16px;
    padding: 13px 17px;
    transition: all 0.0s ease;
}
.b2:hover{
    text-decoration: none; 
    background-color: #D1D7DE;
    color: #027ffd;
    opacity:1;
    transition: 1s;
    border-color: #006089;
}

.b3{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: bold;
    margin-left: -3px;
    margin-right: auto;
    transition: 1s;
    display: inline-block;
    text-decoration: none;
    background-color: #ffffff;
    color: #027ffd;
    border: 0px solid #006089;
    border-radius: 0px;
    font-size: 16px;
    padding: 13px 17px;
    transition: all 0.0s ease;
}
.b3:hover{
    text-decoration: none; 
    background-color: #D1D7DE;
    color: #027ffd;
    opacity:1;
    transition: 1s;
    border-color: #006089;
}

.reg{
    font-family: 'Exo 2', sans-serif;
    color: #333333;
    margin-left: 80px;
    font-size: 25px;
    font-weight: 400;
}

.login{
    font-family: 'Exo 2', sans-serif;
    color: #333333;
    margin-left: 77px;
    font-size: 25px;
    font-weight: 400;
}

input[type=text] {
    padding:10px;
    border:0;
    box-shadow:0 0 1px 4px rgba(0,0,0,0.06);
}

#pos{
    margin-bottom: 10px;
    box-sizing: border-box;
    text-align: center;
    margin-left: 50px;
    padding:10px;
    border:0;
    box-shadow:0 0 1px 4px rgba(0,0,0,0.06);    
}

#date{
    margin-bottom: 10px;
    padding:10px 25px;
    border:0;
    box-shadow:0 0 1px 4px rgba(0,0,0,0.06);
    margin-left: 50px;
}

.but{
    font-family: 'Exo 2', sans-serif;
    position: absolute;
    text-decoration: none;
    color: #5766F5;
    margin-left: 85px;
    font-size: 15px;
    margin-top: 20px;
}

#back{
    width: 45%;
    border: solid 1px;
    height: 235px;
    background: #fff;
    float: left;
    margin-left: 27%;
    margin-top: 1%;
    border-radius: 5px;
    padding: 0px;
}

#avatar{
    width: 135px;
    height: 135;
    border: solid 1px;
    background: #fff;
    float: left;
    border-color: teal;
    margin-left: 46%;
    margin-top: -6%;
    border-radius: 115px;
    padding: 0px;
}

#status{
    width: 20%;
    height: 60px;
    background: #fff;
    margin-left: 40%;
    margin-top: 15%;
    border-radius: 4px;
}

#bord-status{
    width: 42%;
    border-bottom: solid 1px;
    margin-left: 548px;
    margin-top: -50px;
}

#bords{
    width: 1931px;
    height: 41%;
    background: #fff;
    margin-left: -1%;
    margin-top: -390px;
    border-radius: 4px;
}