i want to make a text in header move a little bit right or left-CodePudding

I want to move the text a little bit to the right or left in the header

.header {
  background-color: gray;
  grid-column-start: 1;
  grid-column-end: 3;
  display: grid;
  justify-items: center; /* too much */
  align-items: center;
}

<div >
  <font color="white" ; font size="3"> Header# email things</font>
</div>

CodePudding user response：

Use padding and get rid of the deprecated font tag

.header {
  background-color: gray;
  grid-column-start: 1;
  grid-column-end: 3;
  display: grid;
  align-items: center;
  padding-left:40px;
  color: white;
  font-size: 2em;
}

<div >Header# email things</div>

CodePudding user response：

At first you should change display of .header from grid to inline-grid and then specify the width of that.

.header {
        background-color: gray;
        grid-column-start: 1;
        grid-column-end: 3;
        display: inline-grid;
        justify-items: start; /* too much */
        align-items: center;
        width: 100%;
    }

After that you can easily change the place of the text by using padding. e.g

.header {
        background-color: gray;
        grid-column-start: 1;
        grid-column-end: 3;
        display: inline-grid;
        justify-items: start; /* too much */
        align-items: center;
        width: 100%;
        padding-left: 40px;
    }