How to align items to left (header) - html

Question

I'm trying to align some items to the left, but I don't know what I'm doing wrong.
I'm making the youtube header, and at this time, I've done this
I got to align the first two items to the right with a simple padding, but when it comes to the left side of the header, nothing works. I've used align-items but they do not move.
this is my html code:
header {
width: 100%;
padding: 0px;
/*FLEX*/
display: flex;
flex-direction: row;
border-bottom: 1px solid #000;
}
header .youtube nav a span {
color: red;
padding: 5px;
line-height: 50px;
}
header .menu nav a span {
padding: 30px;
line-height: 50px;
}
header .bloque nav a span {
line-height: 50px;
align-items: flex-end;
}
header .bloque nav img {
line-height: 50px;
align-items: flex-end;
width: 50;
}
<header>
<div class="menu">
<nav>
<span class="icon-menu"></span>
</nav>
</div>
<div class="youtube">
<nav>
<span class="icon-youtube"></span>YouTube
</nav>
</div>
<form>
<fieldset>
<input type="search" placeholder="Search">
<button type="submit">
<span class="icon-magnifying-glass"></span>
</button>
</fieldset>
</form>
<div class="bloque">
<nav>
<span class="icon-camera"></span>
<span class="icon-grid"></span>
<span class="icon-forward"></span>
<span class="icon-globe"></span>
<img src="guía.png" width="100">
</nav>
<div/>
</header>
when I use justify-content:Space-round, the items are placed the way I want to, but not properly spaced between them. But for some strange reason when I use align-item:flex-end they are arranged like in the pic related. how do I solve this? any advice?

Answer 1

To align items within the header tag you need to add justify-content: flex-end; to the header to read more about it Check this site
header {
width: 100%;
padding: 0px;
/*FLEX*/
display: flex;
flex-direction: row;
justify-content: flex-end;
/* justify-content: flex-end;*/ /*uncomment to align left*/
align-items: center; /* to vertical align items */
border-bottom: 1px solid #000;
}
header .youtube nav a span {
color: red;
padding: 5px;
line-height: 50px;
}
/* header .menu nav a span {
padding: 30px;
line-height: 50px;
} */
header .bloque nav a span {
line-height: 50px;
align-items: flex-end;
}
header .bloque nav img {
line-height: 50px;
align-items: flex-end;
width: 50;
}
<header>
<div class="menu">
<nav>
<span class="icon-menu"></span>
</nav>
</div>
<div class="youtube">
<nav>
<span class="icon-youtube"></span>YouTube
</nav>
</div>
<form>
<fieldset>
<input type="search" placeholder="Search">
<button type="submit">
<span class="icon-magnifying-glass"></span>
</button>
</fieldset>
</form>
<div class="bloque">
<nav>
<span class="icon-camera"></span>
<span class="icon-grid"></span>
<span class="icon-forward"></span>
<span class="icon-globe"></span>
<img src="guía.png" width="100">
</nav>
<div/>
</header>