Button is not centred even with resolution independent alignment - html

Question

I have a button on my website, and I used resolution independent alignment. I checked two different computer screens with different resolutions and it looks alright, however, once opened on a larger aspect ratio screen or a mobile/tablet device it re-positions. On a larger aspect ratio screen the buttons moves to the left, on the smaller devices, it floats towards the right. I'm not 100% certain what could of gone wrong. Below is my CSS and HTML code.
HTML:
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<button>Book Appointment</button>
</div>
CSS:
body {
background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center;
background-size: cover;
font-family: Montserrat;
margin: 0;
padding: 0;
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-left: 33%;
margin-top: 3%;
border-radius: 5px;
}
Any idea how to fix this?

Answer 1

You center a html element, which has the standard position and is a block element with margin-left: auto and margin-right: auto.
It is a convention to write the first letter of classes and ids in lowercase.
Example

Answer 2

Just another way to do it:
I wrap your button in div and center the button using text-align:center
Don't forget to take out margin-left: 33%; in your css
HTML
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<div class="center">
<button>Book Appointment</button>
</div>
</div>
CSS
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.center {
text-align: center;
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-top: 3%;
border-radius: 5px;
}
Example: http://codepen.io/anon/pen/EPyjXm

Answer 3

create a new CSS property for a tag and set display to flex(takes up 100% of width; and justify content to center.
EDIT
After checking out your site,
there is a margin-left of 15px coming from somewhere. Get rid of it if that is a possibility or else just add margin-left: 0 to the .Welcome a {...}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
margin-left: 0; /* Add !important in case it is overwritten*/
}
.Welcome {
margin-top: 13%;
}
.Welcome h1 {
text-align: center;
font-family: Montserrat;
font-size: 50px;
text-transform: uppercase;
}
.Welcome a {
display: flex;
/*set display mode of anchor to flex*/
justify-content: center; /* Justify content center*/
}
.Welcome button {
height: 60px;
width: 340px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 17px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
border-radius: 5px;
}
<div class="Welcome">
<h1>Welcome to Beauty Factory Bookings</h1>
<a href="website_link">
<button>Book Appointment</button>
</a>
</div>