오른쪽 여백을 제거 할 수 없으며 div 너비가 축소됨에 따라 커집니다.

Question

이것은 매우 표준적인 것으로 보이지만 HTML/CSS는 이상하게 작동합니다. 나는 게임에 대한 프로필 페이지를 만드는 과정에 있으며 모바일 응답도보고 있습니다. 나는 옳은 마진을 사라지게 할 수 없다. 세로 모드 (Chrome 모바일 에뮬레이터 확장 프로그램 사용)에서는 문제가되지 않지만 가로 모드에서는 div + 여백이 너무 넓어서 스크롤바가 나타납니다.

HTML :

<div class="userProfile" style="display:none"> 
    <div class="profileTop"> 
     <div class="profilePicture"> 
      <img src="somepicture.png"></img> 
     </div> 
     <div class="profileName"></div> 
    </div> 
</div> 

CSS :

.profileTop { 
    position: relative; 
    top: 10%; 
    left: 15%; 
    width: 70%; 
    height: 12%; 
    margin: 0; 
} 

.profilePicture { 
    display: inline-block; 
    width: 12vw; 
} 

.profilePicture img { 
    width: 100%; 
    height: auto; 
    vertical-align: top; 
} 

.profileName { 
    display: inline-block; 
    position: relative; 
    font-family:Stencil; 
    font-size: 1.3em ; 
    font-weight: lighter; 
    color: white; 
    left: 20%; 
    top: 35%; 
} 

어떤 이상한 것은 내가 "profileTop"클래스의 폭을 줄이면 모든 것이 동일하도록, 오른쪽 여백이 증가한다는 것입니다 폭. 어떤 도움이 필요합니까?

편집 : 나는 "USERPROFILE"의 폭을 줄임으로써 가능한 솔루션을 얻을 수 있지만 여전히이 원래 의도했던대로 작동하지 않습니다 날 귀찮게입니다.

EDITx2 : "userProfile"div에도 여백이 있습니다. 나는 "profileTop"div가 부모를 따라 다니는 것 같지만 두 div에 margin-right : 0 속성을 추가하더라도 마진은 여전히 ​​존재합니다. "userProfile"의 부모가 본문입니다.

Answer 1

HTML 코드의 오류로 이미지에 닫기 태그가 필요하지 않습니다.

두 번째로, 미디어 쿼리를 사용하여이를 달성 할 수 있습니다. 미디어 쿼리에도 가로 옵션이있어 사용하기가 정말 쉽습니다. 행운을 빌어 요.

@media (min-width: 700px) and (orientation: landscape) { ... } 

P.S. 두 번째로 codepen 또는 jsFiddle을 사용하면 더 쉽게 당신을 도울 수 있습니다.

편집 : 추가 된 미디어 쿼리 예를

Answer 2

당신은 처음에 할당 된 CSS 속성을 재정의보다 구체적인 선택을 사용해야합니다.

@media (max-width: 768px) { 
    div.userProfile div.profileTop { 
    margin-right:0; 
    } 
}