How can I make the left margin bigger?

coding nerd 'v' 0
Viewed 60

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 class="menu">
        <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 class="menu">
        <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

margin css html
3 Answers

    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 class="menu">
        <h1><span>Welcome!</span><br>What do you want to make?</h1>
    </div>

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

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 class="menu">
        <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>

Riccardo LV0

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 class="menu">
  <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 class="menu">
  <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>

userhGFn0
Related