Q:

Why is my margin:auto; off-center?

Not sure why this is happening but when trying to center .front by doing margin:auto; its off center quite a bit. Here is a picture of it:

body{
    font-family: 'Proza Libre', sans-serif;
    background-color:#f7f3de;
    overflow-x: hidden;
}
.para{
    text-align:left;
    position:relative;
    display:inline;
    right:-100px;
}
.links{
    text-align:center;
    width:100%;
    position:relative;
    display:inline-block;
    font-size:20px;
    top:-50px;
    word-spacing:30px;
}
.logo{
    position:relative;
    display:block;
    float:right;
    width:16%;
    top:-100px;
    right:100px;

}
.front{
    position:relative;
    top:70px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="beach.css">
    <link href="https://fonts.googleapis.com/css?family=Proza+Libre" 
rel="stylesheet">
    <title>Lucas Essex</title>
</head>
<body>
   <div class="para">
   <h1>Beach Corp Inc.</h1>
   </div>
  <div class="links">
      <a href="asdasd.com">FAQ</a>
      <a href="asdasd.com">About</a>
      <a href="asdasd.com">Social</a>
      <a href="asdasd.com">Contact</a>
  </div>
  <div>
  <img src="http://samuibeautifulbeachvillas.com/assets/samui-beautiful-
    beach-villas.png" class="logo">
  </div>
  <div class="gang">
  <img src="http://www.beaches.com/assets/img/home/rst-btc.jpg" class="front">
  </div>
</body>
</html>

A:

Because you have not given the image a width. Block level elements are 100% wide by default so any margin applied with auto will be zero.

