내 웹 사이트의 오른쪽에서 불필요한 여백을 제거하는 방법

Question

내 WordPress 웹 사이트 Quidus 테마를 사용하면 오른쪽에서 불필요한 공간이 생겨 매우 나빠집니다. 제발 도와주세요 :이 공간을 어떻게 제거 할 수 있습니까? 내 웹 페이지가 전체 화면을 채우고 싶습니다. 오른쪽 또는 왼쪽면에는 여백이 없습니다.

Look at the image provided below of my website.

My Website Link is here

참고 : 나는 모든 게시물은 화면 전체 너비에 맞게합니다.

Answer 1

귀하의 HTML 구조는 다음과 같습니다

<div id="page"> 
    <div class="site-content"></div> 
    <div class="right-sidebar-wrapper"></div> 
</div> 

귀하의 CSS는 다음과 같습니다 당신의 CSS와

@media screen and (min-width: 955px) { 
    .site { 
    max-width: 1718px; 
    } 
} 

@media screen and (min-width: 1105px) { 
    .site-content { 
    width: 56%; 
    } 
} 

@media screen and (max-width: 1105px) and (min-width: 955px) { 
    .site-content { 
    width: 70%; 
    } 
} 

@media screen and (max-width: 480px) { 
    .right-sidebar-wrapper { 
    width: 100%; 
    } 
} 

@media screen and (max-width: 768px) and (min-width: 480px) { 
    .right-sidebar-wrapper { 
    width: 100%; 
    } 
} 

@media screen and (max-width: 1105px) and (min-width: 955px) { 
    .right-sidebar-wrapper { 
    width: 70%; 
    } 
} 

@media screen and (min-width: 1105px) { 
    .right-sidebar-wrapper { 
    width: 22%; 
    } 
} 

문제는 .site-content하고 .right-sidebar-wrapper 폭은 그것을 부모의 100 %를하지 않습니다.

의 명확히하자 : 창폭에서

• > 1105px은 .right-sidebar-wrapper = 22 % 정도로 56 %가 + 22 %는 78 %이지만 100 % 56 % = .site-content하면서 위치 - 78 % = 22 %이다 어느 마진이 창 너비에이 해상도

• 에서에서 오는 955 및 <> 1105 .site-content = .site-content 70 인해 % + 70 % = 140 % 아래 오른쪽 사이드 표시를한다 70 %와 .right-sidebar-wrapper = 70 %가 그렇게 #page 수 없어 ~을 동시에 포함하다 그들은 당신이 그들을 서로 옆에 표시 할 해상도에서 부모의 폭의 100 %를 취할 수 있도록 라인

이 변경 그들의 폭 .site-content 및 .right-sidebar-wrapper CSS 규칙을 해결합니다.

@media screen and (min-width: 1105px) { 
    .site-content { 
    width: 56%; 
    } 
} 

@media screen and (max-width: 1105px) and (min-width: 955px) { 
    .right-sidebar-wrapper { 
    width: 70%; 
    } 
} 

에 :

@media screen and (min-width: 1105px) { 
    .site-content { 
    width: 78%; 
    } 
} 

@media screen and (max-width: 1105px) and (min-width: 955px) { 
    .right-sidebar-wrapper { 
    width: 30%; 
    } 
} 

가능한 해결 방법 변경하는 것입니다