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