Where is my true center?!

Hello all!

I’m working on my portfolio website currently and am having some aligning issues. When using text align and auto margins… they don’t seem to line up how I would expect/hope.

[My Portfolio](see profile)

The HTML…

<!DOCTYPE html>
<html>


  <head>
    <title> David Inabinette | Project Manager</title>
    <!-- CSS link -->
    <link href="./DI_style.css" type="text/css" rel="stylesheet">
    <!-- Meta data -->
    <meta name="author" content="David Inabinette">
    <meta name="description" content="Project manager with a variety of experience from all over the country.">
  </head>
  <body>
    <div class="wood">
      <!--<img src="./wood_bg.jpg" alt="Wood Plank background">-->
    </div>
    <header class="banner" role="banner">
      <!-- avatar img div -->
      <div class="banner_avatar">
        <div class="avatar_link">
          <a href="https://www.linkedin.com/in/davidinabinette/" target="_blank"><img src="./DI_LI.jpg" alt="Profile    Picture"></a>
        </div>
      </div>
      <!-- banner content -->
      <p class="banner_greeting">Well Hello There!</p>
      <h1 class="banner_leading">
        My name is David Inabinette. I'm a project manager, based in <a href="https://en.wikipedia.org/wiki/New_York_City" target="_blank">NYC</a>, <br> that has worked in events, theatre, Broadway, touring, <br>and even political campaigns.
      </h1>
      </div>
    </header>
<!-- begin ul of works -->
<section class="past_exp">
  <!-- List title -->
  <h1 class="past_exp_head">Past Experience</h1>
  <hr class="underline" />
  <ul class="past_exp_list">
    <!-- begin ul -->
    <!-- fist ul item -->
    <li class="past_exp_item">
      <h2 class="past_exp_title">
        <a href="https://www.pdastage.com/" target="_blank">Project Manager</a>
      </h2>
      <p class="past_exp_role">Project Manager for Production Design Associates</p>
    </li>
    <!-- end of first list item -->
    <li class="past_exp_item">
      <h2 class="past_exp_title">
        <a href="https://www.thelightingsyndicate.com/" target="_blank">Electrician</a>
      </h2>
      <p class="past_exp_role">Electrician for The Lighting Syndicate in NYC</p>
    </li>
    <li class="past_exp_item">
      <h2 class="past_exp_title">
        <a href="https://www.tts-studios.com/" target="_blank">Scenic Electrician</a>
      </h2>
      <p class="past_exp_role">Set Electrician for TTS Studios</p>
    </li>
    <li class="past_exp_item">
      <h2 class="past_exp_title">
        <a href="http://mamma-mia.com/" target="_blank">Assistant Electrician</a>
      </h2>
      <p class="past_exp_role">Assistant Electrician for MAMMA MIA!</p>
    </li>
    <li class="past_exp_item">
      <h2 class="past_exp_title">
        <a href="https://spoletousa.org/" target="_blank">Master Electrician</a>
      </h2>
      <p class="past_exp_role">Master Electrician at the Memminger Auditorium for SpoletoUSA 2017</p>
    </li>
    <li class="past_exp_item">
      <h2 class="past_exp_title">
        <a href="http://sottile.cofc.edu/" target="_blank">Technical Director</a>
      </h2>
      <p class="past_exp_role">Technical Director at the Sottile Theatre at the College of Charleston</p>
    </li>
    <li class="past_exp_item">
      <h2 class="past_exp_title">
        <a href="https://www.pdastage.com/" target="_blank">Project Manager/Video Dept. Head</a>
      </h2>
      <p class="past_exp_role">Project Manager and Video department Head at Production Design Associates</p>
    </li>
    <!-- past_exp list templates -->

    <!--<li class="past_exp_item">
      <h2 class="past_exp_title">
        <a href="www.google.com" target="_blank">Spotify for Artists</a>
      </h2>
      <p class="past_exp_role">Front end code for Spotify</p>
    </li> -->








  </body>
</html>



The CSS

/* imports */

/* Google OpenSans */
/* cyrillic-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/K88pR3goAWT7BTt32Z01m4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/RjgO7rYTmqiVp7vzi-Q5UYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/LWCjsQkB6EMdfHrEVqA1KYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/xozscpT2726on7jbcb_pAoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/59ZRklaO5bWGqF5A9baEEYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/u-WUoqrET9fUeobQW7jkRYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

/* End OpenSans imports */


/* General Rules */

h1, h2, h3, h4, h5, h6, p {
  font-family: "Open Sans", serif;
  color: white;
  text-align: center;
}

body {
  background-color: black;
}
.wood  {
  background-image: url(./wood_bg.jpg);
  position: fixed;
  background-size: cover;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  margin: auto;
  z-index: -1;

}
.banner_avatar img {
  display: block;
  margin: auto;
  border-radius: 50%;
  margin:auto;
  /*-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0
  filter: grayscale(100%);*/
}
ul, ol {
  color: red;
  list-style-type: none;
  margin: auto;
}

li {
  text-align: center;
  list-style-type: none;
}

a {
  color: #ff3;
}

a:hover {
  color: #808080;
  transition: 0.2s;
}

a::after {
  color: #dbdb2a;
  transition: 0.2s;

}

/* begin class rules */
.banner_greeting {
  font-size: 48px;
  font-weight: bold;
  margin: auto;
  display: block;
}

.avatar_link {
  width: 100px;
  margin-left: auto;
  margin-right: auto;

}

.past_exp_head {
  text-align: center;
  margin-bottom: .2em;
}
.banner {
  text-align: center;

}
.banner_leading {
  text-align: center;
  margin: auto;
  padding: 20px;
}

.underline {
  width: 35%;
  margin-top: 0px;
}

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.