I need assistance with centering all the content on my website across different screen sizes and browsers. Currently, everything appears off-center and aligned to the left on various screens I have tested. You can view the HTML and CSS code in this link. Here is a snippet of my CSS:
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 20;
}
#description{
position: absolute;
top: 200px;
left: 400px;
}
#content{
margin: 0 auto;
height: 100%;
width: 100%;
text-align: center;
line-height: 100%;
display:table-cell;
vertical-align: middle;
}
h1{
color:#4A4A4A;
margin: 0 auto;
text-align: center;
}
h1:hover{
color:#4A4A4A;
}
h2{
color:#4A4A4A;
margin: 0 auto;
text-align: center;
}
h2:hover{
color:#4A4A4A;
}
a{
color:black;
text-decoration: none;
margin: 0px auto;
width: 400px;
}
.circular{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
height: 150px;
border-radius: 75px;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
background: url(./images/profile_picture.jpg) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}
ul{
padding: 0;
text-align:center;
padding-top: 5
}
ul a img {
padding-top: 20px;
}
li{
list-style: none;
text-align: center;
font-size: 30px;
display: inline-block;
margin-right: 10px;
}
#back{
position:absolute;
top:0;
left:0;
bottom:0;
right: 0;
z-index: -99999;
background-color: #f7f7f7;
background-size: cover;
background-position: center center;
opacity: .2;
}
If you could provide guidance on how to center the content correctly, it would be greatly appreciated.