左边距将我的整个 div 向左移动，而不仅仅是其中的文本

Question

我试图通过向其添加 margin-left 来定位我的“我的页眉”，但它一直在移动整个 div 对象，而不仅仅是文本。

在这里查看：https://jsfiddle.net/8denfw3h/

我正在尝试使用 margin-left 将 space 添加到“我的页眉”，这应该会使其向右移动，但它不起作用。

margin-left 将边距添加到整个 div 对象，而不是我想要的“我的页眉”。

我做错了什么？

Answer 1

您可以使用text-align:left只将文本向左移动

Answer 2

您必须使用 h1#aboutTitle 才能获得剩余边距。但是，如果您只是想将文本对齐到中心，我会删除 margin-left 并在 h1#aboutTitle CSS.

上使用 text-align: center;

此外，您在 fiddle 中的 myDiv 上忘记了 >。

.myDiv {
  overflow: hidden;
  width: 500px;
  height: 500px;
  background-color: #EB3A6A;
}

h1#aboutTitle{
  margin-left: 30px;
  font-family: 'Poppins', sans-serif;
  font-size: 65px;
  color: white;
  font-weight: 600;

}

<div class="myDiv">
 <h1 id="aboutTitle">My Header</h1>
</div>

左边距将我的整个 div 向左移动，而不仅仅是其中的文本

Margin left is moving my whole div to the left instead of just the text inside it

html

css

margin