How can I make the left margin bigger?-CodePudding

I would like to move the h1 text more to the middle of the screen, but the left margin isn't working properly. I've tried increasing and decreasing the size of the margin (both with pixels and percentages) but it has no effect on the page. I've also tried changing the background colour to see if I just forgot to end the previous line or I had the wrong dimensions, and the colour changed (so no errors there). I've also ran both the HTML and the CSS code through their respective validators and there's no errors related to the margin/header.
Here's the HTML code:

<body>
    <div >
        <h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>

and the CSS code:

    img, img.menui {
        width: 165px;
        height: auto;
        margin-left: 0px;
        margin-right: 0px;
    }
    div, div.cake, div.menu {
        width: 80%;
        height: 60%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 7%;
    }
    h1 {
        font-size: 16px;
        /*margin-left: 428769875937548px;*/
    }

    <div >
        <h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>
    </div>

For more context you can find the website here

CodePudding user response：

    div, div.menu {
        width: 80%;
        height: 60%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 7%;
    }
    h1 {
        font-size: 16px;
       display: inline-block;
       text-align:center;
    }
    h1 > span {
       font-size: 50px; 
       text-decoration: none; 
       text-shadow: 4px 4px 1px #ffffff; 
       color:#f5cec9;
    }

    <div >
        <h1><span>Welcome!</span><br>What do you want to make?</h1>
    </div>

Move your inline CSS into a CSS class/identifier (span)
Set your H1 wrapper tag to "inline-block" to retain margin values
Set your text to centered to centered the contents text.

CodePudding user response：

Just add "display: inline-block;" to h1:

    img, img.menui {
        width: 165px;
        height: auto;
        margin-left: 0px;
        margin-right: 0px;
    }
    div, div.cake, div.menu {
        width: 80%;
        height: 60%;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 7%;
    }
    h1 {
        font-size: 16px;
        display: inline-block;
        margin-left: 150px;
    }

    <div >
        <h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>
    </div>

CodePudding user response：

margin-left works, you just have to use a realistic value, not billions of pixels like in your (commented) setting:

img,
img.menui {
  width: 165px;
  height: auto;
  margin-left: 0px;
  margin-right: 0px;
}

div,
div.cake,
div.menu {
  width: 80%;
  height: 60%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 7%;
}

h1 {
  font-size: 16px;
  margin-left: 80px;
}

<div >
  <h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>
</div>

But if you want to center the text, just use text-align: center on it:

img,
img.menui {
  width: 165px;
  height: auto;
  margin-left: 0px;
  margin-right: 0px;
}

div,
div.cake,
div.menu {
  width: 80%;
  height: 60%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 7%;
}

h1 {
  font-size: 16px;
  text-align: center;
}

<div >
  <h1><span style="font-size: 50px; text-decoration: none; text-shadow: 4px 4px 1px #ffffff; color:#f5cec9;">Welcome!</span><br>What do you want to make?</h1>
</div>