比例大小的边距不会相对于移动设备上的屏幕大小调整大小

Question

我有一段通过以下Jade创建的文本（HTML模板引擎）：

header
  div(class="header-logo") Order Of The Mouse: 
  div(class="header-phase") Phase 1.7 --
  div(class="header-title") Operation Silk Scarf

使用以下CSS设置样式：

header {
  background-color: #78B82A;
  color: #FFF;
  text-shadow: 2px 2px 2px #000000;
  text-align: center;
  height: 115px;
}

.header-logo {
  font: 1.5em Arial, sans-serif;
  float: left;
  position: relative;
  display: inline;
  margin-left: 1%;
  margin-top: 7px;
}

.header-phase {
  font: 12px Arial, sans-serif;
  position: relative;
  display: inline;
}

.header-title {
  font: 3.4em Arial, sans-serif;
  position: relative;
  float: right;
  top: 10px;
  left: 12px;
}

（我知道CSS需要整理一下，昨晚很匆忙写完，但很累）。

我的问题是：为什么左边距不能扩展到移动设备？它似乎可以在我的笔记本电脑上在不同的浏览器中扩展，并且当窗口调整大小时，但是当我使用我的Android设备访问时（我再次尝试了两种不同的浏览器），div文本将转到屏幕右侧，而不是从左边略微缩进，正如我所期望的那样。

如有必要，我可以在移动设备和非移动设备上添加屏幕截图。

此外，它过去常常应该是这样的：

现在上面的代码在非移动浏览器中显示如下（类似地在移动浏览器中）：

哪一点都不好。

当Jade转换为HTML时，它目前看起来像这样：

<header><div class="header-logo">Order Of The Mouse: </div><div class="header-phase">Phase 1.7 --</div><div class="header-title">Operation Silk Scarf</div></header>

Answer 1

好的，我再次用新眼睛看了看它，看起来好像这是调整大小问题的解决方案：

header {
  background-color: #78B82A;
  color: #FFF;
  text-shadow: 2px 2px 2px #000000;
  height: 115px;
}

.header-logo {
  font: 1.5em Arial, sans-serif;
  float: left;
  position: relative;
  display: inline;
  margin-left: 1%;
  margin-top: 7px;
}

.header-phase {
  font: 14px Arial, sans-serif;
  position: relative;
  display: inline;
  left: 6px;
  top: 10px;
}

.header-title {
  font: 3.4em Arial, sans-serif;
  position: relative;
  top: 12px;
  left: 80px;
}

只有上帝知道它是如何使用我的代码设法看起来正确的，但不知何故它确实如此。奇怪的时候。