All of my h1 tags go the right when zoomed in

Question

I'm new at this and I don't know why the text inside my h1 tag goes to the right when I zoom in.

Here's the CSS code:

h1 {
    font-family: 'Raleway', sans-serif;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    margin-right: 500px;
    margin-left: 500px;
    text-align: center;
}

Also, I didn't use <div> because I didn't know what it was for when I began to code. I tried to change it but everything is build around my current technique.

Thanks.

Answer 1

Seeing as you are just beginning to code - this looks great!

I did the same thing when I first started and I'm pretty sure most people do. But Like the comments say - {margin: 0 auto} works best. Divs are very, very important.

Use chrome's development tools - This is a good way to add and remove CSS rules quickly.
View -> Developer -> Developer Tools. Navigate to the header through the collapsable menus, click it and note the associated rules on the right. Uncheck Your margin left and right to test the CSS rules.

You need to remove your margin-left: and right 500px;

I would STILL suggest something like this

<div id="container">
<h1> Your Header </h1>
</div>

This way, you can target JUST the h1 in the div of container in your css

#container h1 {
text-align:center
}
 #container{
 margin: 0 auto;
}

If this worked, please mark answered