Solving simple CSS problems used to be a breeze for me with just some trial and error. However, I've been struggling all day without any success. At this point, I'm at a loss for what to do.
My current challenge is centered around aligning an image at the top of my page while using a template that has default text in place. I thought swapping out the title text with an image would be straightforward, but I was mistaken.
For better clarity on my issue, here's a screenshot of the Github template highlighting the section in question as "Sample Title": https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3
The code snippet for the header appears as:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Sample Title by Somebody</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Sample Title</h1>
<h2 class="project-tagline"></h2>
<a href="" class="btn">View on GitHub</a>
<a href="" class="btn">Download .zip</a>
<a href="" class="btn">Download .tar.gz</a>
</section>
The stylesheet corresponding to the Header section looks like:
.page-header {
color: #fff;
text-align: center;
background-color: #159957;
background-image: linear-gradient(120deg, #155799, #159957); }
@media screen and (min-width: 64em) {
.page-header {
padding: 5rem 6rem; } }
...
(project-name classes...)Despite multiple attempts, including adjusting margins, absolute positioning, floats, and modifying stylesheet properties, I can't seem to properly center the small logo where the Sample Title text resides. Any advice or assistance would be highly appreciated!