I'm having trouble aligning the links vertically in the center of the navigation bar, with the logo overlapping the content.
Check out the HTML code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEXT ABC</title>
<!-- Import Google Fonts -->
...
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
...
</nav>
<div class="video-container">
...
</div>
<!-- Import Bootstrap JS -->
...
</body>
</html>
Have a look at the CSS code here:
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
...
/* Navigation Links Styles
.navbar-nav {
display: flex;
align-items: center;
margin-left: auto;
justify-content: center;
}
...
Could someone assist me in identifying what went wrong and how I can resolve this issue across all devices?
I've attempted to center the text without success.
Screenshots: