爲什麼我的網站左側有一個寬廣的空間？

Question

瀏覽器中顯示網站html左側的非常寬的空間。我不知道原因，甚至發生了這種情況。 我上傳我的網站住在這裏：http://kfs-saintgeorge.esy.es/

這是我的CSS文件：

*{ 
    box-sizing: border-box; 

} 

html{ 
    direction: rtl; 
    background-color: #b7b7b7; 
    margin: 0 auto; 
    padding: 0; 
} 

img{ 
    max-width:100%; 
} 

body{ 
    width: 60%; 
    margin: auto; 
    padding: 0; 
} 

div{ 
    border-radius: 10px; 
} 

.centering{ 
    text-align: center; 
} 


#hbackground{ 
    background: url('/images/background.jpg') no-repeat ; 
    background-size: cover; 
    display: block; 
    border-radius: 20px 20px 0px 0px; 
    margin: 10px auto; 
    width: 100%; 
    padding-top:37.01527614571093%; 

} 

.btop{ 
    border-radius: 0; 
    height: 4px; 
    width: 100%; 
} 

#header ul{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #1e7989; 
    font-family: hfont; 
    font-size: 20px; 
    display: flex; 
    justify-content: space-around; 
    z-index: 1; 
    margin:10px auto; 
    width: 100%; 
} 

#header li{ 
    width: 9em; 
    height: 70px; 
    background-color: #1e7989; 
    flex: 1 1 auto; 
} 


#header li a{ 
    display: block; 
    line-height: 70px; 

} 

.content { 
    background-color: #ffffff; 
    width:100%; 
    text-align: center; 
    line-height: 2em; 
    line-height: 50px; 
} 

.content p { 
    width: 85%; 
    margin:0 auto; 
    font-family: contentfont; 
    font-weight: bold; 
    font-size: 23px; 
    color:#862222; 
} 

a:link, a:visited{ 
    text-decoration: none; 
    color:#ffffff; 
} 


h2{ 
    color:#187477; 
    font-family: headlinefont; 
    font-weight: normal; 
    text-decoration: underline; 
    text-align: center; 
} 

.mainmenu { 
    cursor: pointer; 
    color:#ffffff; 
    text-align: center; 
    display: block; 
    margin-bottom: 0; 
    bottom: 0; 
    border:0; 
    font-size: 1em; 
    font-weight: bold; 
    width: 100%; 
} 

.submenu { 
    list-style-type: none; 
    padding: 0; 
    text-align: center; 
    background-color: #17243e; 
    margin: 0 auto; 
    display: none; 
    border-radius: 0 0 7px 7px; 
} 

.submenu li { 
    border-bottom: 2px solid white; 
} 

.submenu li:last-child, .submenu li:last-child a:last-child { 
    border-bottom: 0; 
    border-radius: 0 0 7px 7px; 

} 

.submenu a:hover { 
    background-color: aliceblue; 
    color: #000000; 
} 


nav{ 
    width: 29%; 
    display: inline; 
} 

nav div{ 
    margin-bottom: 10px; 
    background-color: #ffffff; 
    padding: 10px; 
    max-width: 100%; 
} 

#sidebar{ 
    background-color: white; 
    padding: 0; 
    font-family: contentfont; 
} 

#sidebar>ul{ 
    list-style-type: none; 
    margin: 0; 
    padding: 20px; 

} 

#sidebar>ul >li{ 
    position: relative; 
    background-color: #1a8891; 
    border:2px solid #0c383a; 
    margin-bottom: 5px; 
    border-radius: 10px; 
} 

#sidebar a:link,#sidebar a:visited{ 
    display: block; 
    position: relative; 
    width: 100%; 
    text-align: center; 
    line-height: 40px; 
    font-size: 1em; 
    font-weight: normal; 
} 

#sidebar li:hover{ 
    background-color: #156b72; 
} 

#body2{ 
    width: 100%; 
    display: flex; 
    justify-content: space-around; 
    align-items:flex-start; 
    flex-direction: row; 
} 

#main_content{ 
    width: 70%; 
    vertical-align: top; 
} 

#footer{ 
    background-color: #05333b; 
    width: 100%; 
    height: 100px; 
    text-align: center; 
    color:#ffffff; 
    font-family: Arial; 
    line-height: 20px; 
    border-radius: 0px; 
    margin: auto; 
    display: block; 
    bottom: 0; 
    right: 0; 

} 

#footer p{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

#cp_widget_e6374685-0d11-4dc4-9b95-04f8435cd872{ 
    margin: 0 auto; 
    padding: 10px; 
} 

#homeImages{ 
    background-color: white; 
    margin: auto; 
    text-align: center; 

} 

.mainmenu i{ 
    position: absolute; 
    right: 10%; 
    top:10px; 
    vertical-align: middle; 
} 

@media screen and (max-width: 1200px){ 
    body{ 
     width: 100%; 
    } 

    header ul{ 
     font-size: 5px; 
    } 
} 

#social{ 
    direction: ltr; 
    height: auto; 
    margin: auto; 
    display: flex; 
    justify-content: center; 
    margin-bottom: 10px; 
    flex-wrap: wrap; 
} 

.social{ 
    color:black; 
    padding: 3px; 
} 

.fb:hover{ 
    color:#000098; 
} 

.yt:hover{ 
    color: #ff0000; 
} 

#facebook-page{ 
    max-width: 100%; 
    padding: 0; 
    text-align: center; 
    overflow: hidden; 
} 

.fb-page{ 
    margin: auto; 
    text-align: center; 
    max-width: 100%; 
    padding: 0; 
} 

Answer 1

至於我可以看到它是因爲在你的HTML元素 direction: rtl標籤。

試圖把它裏面#body2：

#body2 { 
    width: 100%; 
    display: flex; 
    justify-content: space-around; 
    align-items: flex-start; 
    flex-direction: row; 
    direction: rtl; 
}