I am currently working on creating a navigation bar that features a centered logo with two links positioned on each side. My goal is to have the side links placed closer to the logo than the edges of the page. Initially, I attempted to achieve this using various properties such as position, top, left, etc. However, I encountered layout issues when viewing the website at lower resolutions. This led me to explore flexbox after learning about it in a recent YouTube video on HTML.
Any guidance or assistance provided would be greatly appreciated!
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.photoauraone {
max-width: 100%;
max-height: 100%;
width: auto;
margin: auto;
overflow: hidden;
size: cover;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
height: 5%;
width: 5%;
}
.backgroundimage {
background-image: url("photoauraone.jpg");
background-size: cover;
overflow: hidden;
size: cover;
height: 100vh;
}
header {
display: flex;
justify-content: space-between;
}
nav {
order: -1;
align-items: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RADIO AURA</title>
<link rel="stylesheet" href="css_index.css">
</head>
<body>
<div class="backgroundimage">
<header>
<nav>
<div class="container">
<div class="wrapper">
<ul class="left_links">
<il><a href="">About Us</a></il>
<il><a href="">Shows</a></il>
<il><a href=""><img src="logo_normal_purple.png" class="logo"></a></il>
<il><a href="">Player</a></il>
<il><a href="">Contacts</a></il>
</ul>
</div>
</div>
</nav>
</header>
</div>
</body>
</html>