右余白を削除することはできませんし、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コードでエラーが発生しました。画像の終了タグは必要ありません。

第2に、メディアクエリを使用してこれを達成できます。メディアクエリにはランドスケープオプションもあり、使いやすいです。幸運

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

P.S. codepenまたはjsFiddleをもう一度使用してください。より簡単に手助けすることができます。

EDIT：追加したメディアクエリ例

Answer 2

あなたが最初に割り当てられたCSS属性をオーバーライドするために、より具体的なセレクタを使用する必要があります。

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