I recently modified some code to create a transparent background for my logo on top of a parallax image. However, after making these changes, I noticed that the logo no longer appears in the center of the screen. Can someone help me identify what could be causing this issue?
HTML
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
...
</nav>
<div id="homepage-front-logo">
<img src="images/logo-placeholder.png" class="img-fluid" />
</div>
<div class="parallax-header-image"></div>
</body>
CSS
.homepage-front-logo {
width: 200px;
padding: 15px;
position: relative;
opacity: 0.5;
}
#homepage-front-logo {
position: absolute;
width: 300px;
display: block;
}