Apologies for the appearance of my website, it's a work in progress! I don't have much experience with HTML or CSS.
Currently, I am facing an issue where the alignment of my name in the site header is not consistent with the links and images. Despite trying various solutions like adjusting line-height and vertical-align properties, nothing seems to be working. It's puzzling why there is so much space between the top of the page and the header.
Below is the CSS that pertains to this problem:
.header {
margin: 0;
background: #1c1c1c;
text-align: left;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
padding: 0;
background: #101010;
}
.header h1 {
display: inline;
color: #ffffff;
}
.header ul {
display: inline;
}
.header ul li {
display: inline;
}
.header ul li a:hover {
opacity: 0.5;
background: none;
}
.header ul li a {
display: inline;
padding: 0 0.2em;
opacity: 0.25;
}
.header ul li a:hover {
opacity: 1;
}
.header p {
background: #1c1c1c;
}
And here is the relevant HTML code:
<div class="header">
<h1>Kyle Parker</h1>
<ul>
<li>
<a href="http://www.linkedin.com/pub/kyle-parker/54/16b/965/" title="My resume on Linkedin">
<img src="img/icon-linkedin.png" alt="LinkedIn" />
</a>
</li>
<li>
<a href="https://twitter.com/KyleSparker" title="Follow me on Twitter">
<img src="img/icon-twitter.png" alt="Twitter" />
</a>
</li>
</ul>
</div>
If anyone could provide some guidance on fixing this issue along with an explanation, it would be greatly appreciated. Thank you!