Where is my true center?!


#1

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;
}


#2

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