为什么当我只移动一个盒子时，所有三个盒子都会移动？

Question

希望有人能帮我解决我的问题。 我正在尝试制作自己的网站，但是当我尝试移动三个单独的盒子中的一个（请参见图片）时，他们三个都会移动。 three boxes issue

[同样的问题也发生与社会图标框，但我与那款不太关注]

我希望有人可以看看代码，希望能告诉我在哪里我已经出错了。

My Website Files

Answer 1

你已经在你的CSS把position:block。在CSS中没有position:block。你必须使用display属性。我已经改变你的盒子div的css为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更改为此，然后您可以单独移动每个框。希望这可以帮助你。