Having some trouble with implementing "flex" in CSS. My nav bar just won't move to the right no matter what I try. Spent hours adjusting margins, displays, and floats but it's stuck in the middle... Still learning, so any help is appreciated!
If you want a better visual, here's the link to my Codepen:
https://codepen.io/Saharalara/pen/pGyQWZ
The HTML code:
<div id="page-wrapper">
<header>
<div class="logo">
<img id="header-img" src="https://upload.wikimedia.org/" alt="Minnie Pic">
<span id="logo-name">Minnie & Friends Inc</span>
</div>
<nav id="nav-bar">
<ul id="nav-ul">
<li class="nav-link"><a href="#stories">Stories</a><li>
<li class="nav-link"><a href="#toys">Toys</a><li>
<li class="nav-link"><a href="#subscribe">Subscribe</a></li>
</ul>
</nav>
</header>
<body>
<container id="container1">
<section>
<h1 id="stories">Minnie & Friends Stories</h1>
<p>
<a href="#"> Here</a> you will find all of the best Minnie & Friends toys
and stories.
Choose from a huge variety of stories and the happy gang as they go on
many adventures.
</p>
<section>
<iframe id="video" height="180" src="https://www.youtube.com/watch?
v=crJ1CwD_TX0" frameborder="1" allowfullscreen ></iframe>
</section>
<h2 id="toys">Minnie & Friends Toys</h2>
<p>
<a href="#">Here</a> you will also find many of your favorite characters
to choose from and order to arrive at your doorstep to continue their
adventures with you.
</p>
<h3 id="subscribe">Subscribe to our newsletter</h3>
</section>
</container>
</body>
The Css
#page-wrapper {
position: relative;
color: black;
margin: -9px;
padding: 10px;
border: 4px solid;
border-radius: 3px;
background-color: rgba(223, 42, 42, 0.20);
padding: 10px 20px 20px 20px;
}
header {
display: flex;
font-size: 1.3em;
margin-left: -10px;
margin-right: -10px;
background-image: url('https://cdn2.vectorstock.com/i/1000x1000/07/66/pink-
white-star-polka-dots-background-vector-7590766.jpg');
opacity: 0.80;
}
#header-img {
height: 120px;
}
#logo-name {
font-size: 2em;
color: black;
}
h1,
h2,
h3 {
font-size: 2em;
}
//navigation bar
#nav-bar {
display: flex;
justify-content: flex-end; //**not working***
}
#nav-ul {
list-style-type: none;
display: flex;
}
nav li {
padding: 4px;
}
//body
p {
font-size: 1.2em;
}
#video {
border: 5px solid;
border-radius: 3px;
color: pink;
}