无法删除右边距，并且随着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%;
}

奇怪的是，如果我减小＆＃34; profileTop＆＃34;的宽度。类，右边距增长使整个事物的宽度相同。有什么帮助吗？

编辑：我可以通过减少＆＃34; userProfile＆＃34;的宽度来获得可行的解决方案。但它仍然困扰着我，因为它不像原先的预期那样工作。

EDITx2：＆＃34; userProfile＆＃34; DIV。我想＆＃34; profileTop＆＃34; div正以某种方式关注其父级，但即使我将margin-right：0属性添加到两个div，边距仍然存在。 ＆＃34; userProfile＆＃34;的父母是身体。

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;
  }
}