I am trying to position my "My Header" by adding margin-left to it, but it keeps moving the whole div object instead of just the text.

Check it out here: https://jsfiddle.net/8denfw3h/

I am just trying to use the margin-left to add space to "My Header", which should shift it towards to the right, but it is not working.

The margin-left is adding the margin to the entire div object, not the "My Header" like I want it to.

What am I doing wrong?

CodePudding user response：

You'll have to use h1#aboutTitle in order to get that margin-left. However, if you're just trying to align the text to the center I would remove the margin-left and use text-align: center; on the h1#aboutTitle CSS.

Also, you forgot your > on your myDiv in your fiddle.

.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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use text-align:left to only move the text to the left direction