CSS div在特定页面上更改位置

Question

我遇到了一个奇怪的CSS问题，当我访问某些页面时，我网站上的主div容器转移到右侧。出现这种情况，即使没有具体的CSS规则来移动它

我上传我的网站的一个临时版本在这里： http://myawesometestsite.ddns.net/

当你去到出版物和联系网页整个容器转移到正好几个像素。该位置似乎是正确的，未移动的所有其他网页

这是一个完整的CSS我使用：

body { 
    background-color: #dcd8cf; 
    font-family: Raleway, Arial, sans-serif; 
    font-size: 1em; 
} 

h1 { 
    font-size: 1.5em; 
    color: #832C00; 
    margin-bottom: 30px; 
} 

h2 { 
    font-size: 1.2em; 
    color: #832C00; 
    margin-top: 30px; 
} 

h3 { 
    font-size: 1em; 
    margin-bottom: 5px; 
    margin-top: 20px; 
} 

h4 { 
    font-size: 1em; 
    font-style: italic; 
    margin-top: 0px; 
    margin-left: 10px; 
    margin-bottom: 5px; 
} 


.container { 
    position: relative; 
    left: 50%; 
    margin-left: -470px; 
    width: 940px; 
    border: 1px solid black; 
} 


/* 
Header 
*/ 

header { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    height: 180px; 
    background-color: #a63700; 
} 

header h1 { 
    position: absolute; 
    font-size: 2.5em; 
    color: #e6e6dc; 
    top: 50px; 
    left: 100px; 
    margin: 0px; 
} 

header h2 { 
    position: absolute; 
    font-size: 0.77em; 
    color: #e6e6dc; 
    top: 100px; 
    left: 100px; 
    margin: 0px; 
    opacity: 0.7; 
} 

header img { 
    border: 2px solid #e6e6dc; 
    border-radius: 50%; 
    max-width: 100%; 
    max-height: 100%; 
} 

.profileImage { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 
    max-width: 150px; 
    max-height: 150px; 
} 

.skillIcons { 
    position: absolute; 
    right: 25px; 
    top: 15px; 
} 

.skillIcons img { 
    display: inline; 
    width: 75px; 
    height: 75px; 
    padding: 5px; 
    margin: 15px; 
    opacity: 0.7; 
} 

/* 
Navigation menu 
*/ 

nav { 
    position: relative; 
    z-index: 1; 
    text-align: center; 
    letter-spacing: 2px; 
    background-color: #a63700; 
    height: 50px; 
    width: 100%; 
} 

nav a { 
    position: relative; 
    top: 20px; 
    color: #D1D1C9; 
    text-decoration: none; 
    padding: 0 30px; 
} 

nav a:hover { 
    border-bottom: solid 1px #e6e6dc; 
    padding-bottom: 3px; 
} 

.navSelected { 
    text-shadow:0px 0px 1px white; 
    color: white; 
} 



/* 
Main content 
*/ 

main { 
    position: relative; 
    background-color: white; 
    padding: 10px; 
} 


/* 
Footer 
*/ 

footer { 
    position: relative; 
    color: #e6e6dc; 
    background-color: #a63700; 
    font-size: 10pt; 
    padding: 10px; 
} 

.leftFooter ul { 
    padding-left: 0px; 
} 

.leftFooter li { 
    display: inline; 
    list-style-type: none; 
} 

.leftFooter li a { 
    color: #e6e6dc; 
    text-decoration: none; 
} 

.leftFooter li + li:before { 
    color: #e6e6dc; 
    content: "|"; 
    padding: 10px; 
} 

.rightFooter { 
    position: absolute; 
    right: 10px; 
    top: 4px; 
} 

.rightFooter img { 
    display: inline; 
    max-width: 30px; 
    max-height: 30px; 
    vertical-align: middle; 
    margin-top: -3px; 
} 

.copyright { 
    font-size: 1em; 
} 


/* 
Home page 
*/ 




/* 
Publications page 
*/ 

.hangingIndent { 
    padding-left: 1.5em; 
    text-indent:-1.5em; 
} 

.publications h2 { 
    margin-top: 50px; 
} 


/* 
Code page 
*/ 

.codeProjects a { 
    color: #a63700; 
    text-decoration: none; 
} 

.codeProjects a:hover { 
    text-decoration: underline; 
} 

.codeProjects p { 
    margin-left: 10px; 
} 


/* 
CV page 
*/ 

.cvContainer { 
    width: 90%; 
    margin: 0 auto; 
} 

.cvEntry { 
    margin-bottom: 30px; 
    margin-left: 20px; 
    margin-right: 20px; 
} 

.sectionHeading { 
    width: 100%; 
    border-bottom: 1px solid #000; 
} 

.alignLeft { 
    display: block; 
    float: left; 
    text-align: left; 
    width: 80%; 
    margin-top: 10px; 
} 

.alignLeft p { 
    font-size: 1em; 
} 

.alignLeftSub { 
    margin-top: -10px; 
    margin-left: 20px; 
} 

.alignRight { 
    display: block; 
    float: right; 
    text-align: right; 
    width: 20%; 
    margin-top: 10px; 
} 

.clear { 
    clear: both; 
} 


/* 
Contact page 
*/ 

.contactInfo { 
    margin-left: 20px; 
} 

.contactInfo img { 
    display: inline; 
    max-width: 30px; 
    max-height: 30px; 
    vertical-align: middle; 
} 

.emailHidden { 
    display: none; 
} 

.contactInfo a { 
    margin-left: 5px; 
    color: #a63700; 
    text-decoration: none; 
} 

.contactInfo #emailAddress { 
    margin-left: 2px; 
} 

.contactInfo #emailAddress a { 
    margin-left: 8px; 
} 


/* 
Media queries 
*/ 


@media screen and (max-width : 940px) { 

    .container { 
     position: relative; 
     left: 0px; 
     margin: 0px; 
     width: 100%; 
    } 

    header h1 { 
     left: 5%; 
     margin: 0px; 
    } 

    header h2 { 
     left: 5%; 
     margin: 0px; 
    } 

    .skillIcons img { 
     max-width: 70px; 
     max-height: 70px; 
     margin-left: 5px; 
     margin-right: 0px; 
    } 

} 

@media screen and (max-width : 800px) { 

    header h1 { 
     display: none; 
    } 

    header h2 { 
     display: none; 
    } 

    .skillIcons img { 
     display: none; 
    } 

    nav { 
     height: 150px; 
    } 

    nav a { 
     display: block; 
    } 

    nav a:hover { 
     border-bottom: none; 
     padding-bottom: 0px; 
    } 

} 

@media screen and (max-width : 600px) { 

    .rightFooter { 
     position: relative; 
     display: block; 
     margin-left: 10px; 
    } 

} 

我不相信有什么事，在这里是造成容器转移只是这2页，但也许我错过了一些东西。任何人有任何想法是什么造成这种情况？

Answer 1

添加“overflow-y：scroll;”到你的“身体”选择器。它应该看起来像这样在你的CSS：

body { 
    background-color: #dcd8cf; 
    font-family: Raleway, Arial, sans-serif; 
    font-size: 1em; 
    overflow-y: scroll; 
} 

Answer 2

页面的长度创建一个垂直滚动条。出版物和联系人很小，其他人则比屏幕更大。为了解决这个问题，你需要设置一个overflow-y来滚动;

body { 
overflow-y: scroll; 
}