I need the span tag to center itself evenly in the middle of the logo next to it, but i cant seem to figure out what i need for that to happen.
Code below:
/** global elements styling**/
@import "https://fonts.googleapis.com/css?family=Poppins:400";
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
margin: 0;
padding: 0;
box-sizing: border-box;
}
span {
font-family: "Poppins", sans-serif;
float: none;
position: relative;
}
/**global classes styling**/
/** nav takes care of ul and li font-family**/
nav {
font-family: "Poppins", sans-serif;
width: 100%;
height: 80px;
position: fixed;
box-sizing: border-box;
align-items: center;
min-height: 8vh;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
background-color: #23bebe;
}
nav a {
font-family: "Poppins", sans-serif;
text-decoration: none;
}
#nav-bar {
top: 0;
position: fixed;
width: 100%;
}
#header {
margin: 0;
padding: 0px;
display: flex;
justify-content: space-between;
}
ul {
display: inline-block;
flex-direction: row;
margin-right: 50px;
margin-bottom: 20px;
margin-top: 25px;
letter-spacing: 5px;
word-spacing: 10px;
justify-content: space-between;
}
li {
list-style: none;
text-decoration: none;
margin-left: 10px;
display: inline-block;
justify-content: space-between;
position: relative;
}
.logo {
margin: 10px 8px auto;
margin-top: 10px;
padding-top: 10px;
padding-left: 20px;
}<!DOCTYPE html>
<head lang="eng">
<meta charset="UTF-8">
<meta name="viewport">
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<title>Drums Company</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400">
</head>
<body>
<div class="aligned-container">
<header id="header">
<!--needs to be id="nav-bar"-->
<nav id="nav-bar">
<div class="logo"><img src="https://img.icons8.com/windows/50/000000/drum-set.png" alt="drum set"><span>Drums Company</span>
</div>
<div class="nav-container">
<ul>
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#products" class="nav-link">Products</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</div>
</nav>
</header>
</div>
</body>/** global elements styling**/
@import "https://fonts.googleapis.com/css?family=Poppins:400";
* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
margin: 0;
padding: 0;
box-sizing: border-box;
}
span {
font-family: "Poppins", sans-serif;
float: none;
position: relative;
}
/**global classes styling**/
/** nav takes care of ul and li font-family**/
nav {
font-family: "Poppins", sans-serif;
width: 100%;
height: 80px;
position: fixed;
box-sizing: border-box;
align-items: center;
min-height: 8vh;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
background-color: #23bebe;
}
nav a {
font-family: "Poppins", sans-serif;
text-decoration: none;
}
#nav-bar {
top: 0;
position: fixed;
width: 100%;
}
#header {
margin: 0;
padding: 0px;
display: flex;
justify-content: space-between;
}
ul {
display: inline-block;
flex-direction: row;
margin-right: 50px;
margin-bottom: 20px;
margin-top: 25px;
letter-spacing: 5px;
word-spacing: 10px;
justify-content: space-between;
}
li {
list-style: none;
text-decoration: none;
margin-left: 10px;
display: inline-block;
justify-content: space-between;
position: relative;
}
.logo {
margin: 10px 8px auto;
margin-top: 10px;
padding-top: 10px;
padding-left: 20px;
}please help!! :)
