Почему все три коробки перемещаются, когда я пытаюсь переместить только одну?

Question

Надеюсь, кто-то может помочь мне с моей проблемой. Я пытаюсь создать свой собственный сайт, но когда я пытаюсь переместить один из трех отдельных ящиков (см. Рисунок), все трое перемещаются. three boxes issue

[Та же проблема также происходит с коробкой социальной иконки, но я меньше озабочен этой секции]

Я надеюсь, что кто-то может взглянуть на код, и, надеюсь, скажите мне, где я пошло не так.

My Website Files

Answer 1

Вы поставили position:block в вашем CSS. В css нет position:block. Вам нужно использовать свойство display. Я изменил поле css box box на display: inline-block; и сделал несколько изменений в ширине (используя calc).

@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Source+Sans+Pro'); 
@import url('https://fonts.googleapis.com/css?family=Poppins'); 


* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

body { 
    background-image: url(../css/images/background/backgroundimage.jpg); 
} 

/* HEADERBAR */ 
div#headerbar { 
    width: 100%; 
    height: 50px; 
    display: inline-block; 
    background-color: rgba(237,87,82, 0.65); 
    font-family: 'Source Sans Pro', sans-serif; 
    box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000; 
    -webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000; 
    -moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000; 
    -o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000; 
} 

.leftlogo { 
    float: left; 
    margin-top: 12px; 
    margin-left: 15px; 
    color: #fff; 
    text-shadow: 1px 1px 1px #000; 
    font-size: 20px; 
    font-family: 'roboto+condensed', sans-serif; 
} 
.leftlogo span { 
    font-weight: 300; 
    color: rgba(237, 87, 82, 0.8); 
    font-size: 20px; 
    font-family: 'roboto', sans-serif; 
} 

.version { 
    float: right; 
    margin-top: 14px; 
    margin-right: 10px; 
} 

/* CODE TEST */ 
.box { 
    width: 40%; 
    margin: 0 auto; 
    background: rgba(255,255,255,0.2); 
    padding: 35px; 
    border: 2px solid #fff; 
    border-radius: 21px/40px; 
    background-clip: padding-box; 
    text-align: center; 
} 

.button { 
    margin-top: 10px; 
    font-size: 1em; 
    padding: 14px; 
    color: #fff; 
    text-decoration: none; 
    cursor: pointer; 
    transition: all 0.3s ease-out; 
font-family: 'Source Sans Pro', sans-serif; 
} 
.button:hover { 
    background: rgba(255, 255, 255, 0.3); 
    border: 3px solid #000; 
} 

.overlay { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 0, 0.7); 
    transition: opacity 500ms; 
    visibility: hidden; 
    opacity: 0; 
} 
.overlay:target { 
    visibility: visible; 
    opacity: 1; 
} 

.popup { 
    margin: 70px auto; 
    padding: 20px; 
    background: #000; 
    border-radius: 5px; 
    border: 5px solid #126b72; 
    width: 70%; 
    position: relative; 
    transition: all 5s ease-in-out; 
    color: #fff; 
    font-family: 'Roboto Condensed', sans-serif; 
} 

.popup h2 { 
    margin-top: 0; 
    color: #333; 
    font-family: Tahoma, Arial, sans-serif; 
} 
.popup .close { 
    position: absolute; 
    top: 20px; 
    right: 30px; 
    transition: all 200ms; 
    font-size: 30px; 
    font-weight: bold; 
    text-decoration: none; 
    color: #333; 
} 
.popup .close:hover { 
    color: #06D85F; 
} 
.popup .content { 
    max-height: 30%; 
    overflow: auto; 
} 

@media screen and (max-width: 700px){ 
    .box{ 
    width: 70%; 
    } 
    .popup{ 
    width: 70%; 
    } 
} 

div#updatesbox { 
    width: 900px; 
    height: 40px; 
    background-color: #000; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 
    box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000; 
} 

.updatesbox1 { 
    width: 443px; 
    height: 30px; 
    background-color: rgba(255, 255, 255, 0.2); 
    display:inline-block; 
    margin-top: 5px; 
    margin-left: 5px; 
    box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000; 
    -webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000; 
    -moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000; 
    -o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000; 
} 

.updatesbox2 { 
    width: 443px; 
    height: 30px; 
    background-color: rgba(255, 255, 255, 0.2); 
    float: right; 
    display: inline-block; 
    margin-top: 5px; 
    margin-right: 5px; 
    box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000; 
    -webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000; 
    -moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000; 
    -o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000; 
} 

.twitter { 
    float: left; 
    margin-top: 7px; 
    margin-left: 40px; 
} 

.tweet { 
    color: white; 
} 
.facebook a { 
    color: rgba(273, 87, 84, 1); 
    text-decoration: none; 
    font-family: 'Poppins', sans-serif; 
} 
.facebookicon { 
    margin-left: 5px; 
    margin-top: 7px; 
} 

.steam a { 
    color: rgba(273, 87, 84, 1); 
    text-decoration: none; 
    font-family: 'Poppins', sans-serif; 
} 
.steamicon { 
    margin-left: 5px; 
    margin-top: 7px; 
} 

.instagram a { 
    color: rgba(273, 87, 84, 1); 
    text-decoration: none; 
    font-family: 'Poppins', sans-serif; 
} 
.instaicon { 
    margin-left: 5px; 
    margin-top: 7px; 
} 

.tweet a { 
    color: rgba(237, 87, 84, 1); 
    text-decoration: none; 
    font-family: 'Poppins', sans-serif; 
} 
/* ALTERNATING TEXT */ 
#tickertape{ 
    display: block; 
    margin-left: 600px; 
    margin-right: auto; 
    margin-top: 14.5px; 
    text-align: center; 
    width:400px; 
    height:20px; 
} 
.tickertape { 
    display: block; 
    margin-top: 6px; 
    margin-left: 20px; 
    margin-right: auto; 
    color: #000; 
} 

#subtickertape{ 
    position:absolute; 
    width:443px; 
    height:20px; 
} 

.subtickertapefont{ 
    font:bold 12px Verdana; 
    text-decoration:none; 
    color: rgba(237, 87, 84, 0.6); 
    text-shadow: 2px 2px 2px #000; 
} 

.subtickertapefont a{ 
    color:white; 
    text-decoration:none; 
} 

/* BODY CONTAINER BOX */ 

div#bodycontainer { 
    margin-top: 20px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: rgba(237, 87, 84, 0.3); 
    width: 90%; 
    height: 800px; 
    border: 2px dashed #000; 
} 

#bodycontainer #insidebox { 
    display: inline-block; 
    float: left; 
    width: calc(32.3% - 7.5px); 
    height: 500px; 
    margin: 15px; 
    margin-top: 70px; 
    background: rgba(237, 87, 84, 0.2); 
    border: 2px dashed #000; 
} 

#bodycontainer #centerbox { 
    display: inline-block; 
    float: left; 
    width: calc(32.3% - 7.5px); 
    height: 400px; 
    margin: auto; 
    margin-top: 200px; 
    background: rgba(255, 255, 255, 0.2); 
    border: 2px dashed #000; 
} 

#rightbox { 
    display: inline-block; 
    float: left; 
    width: calc(32.3% - 7.5px); 
    height: 710px; 
    margin: auto; 
    margin-top: 0px; 
    background: rgba(237, 87, 84, 0.2); 
    border: 2px dashed #000; 
    margin-left: 15px !important; 
} 

изменить ваш stylesheet.css на это, а затем вы можете перемещать каждую коробку отдельно. Надеюсь, это вам поможет.