Duplicating Youtube's navigation bar, but, I have a habit of using position: absolute; I need a more effective way of doing this - html

Question

This is the epitome of DRY code, I need to find an effective way of writing this code. I am currently using The Odin Project and the guidelines were to Duplicate Youtube's video section. I completed the navigation bar, but I am unhappy with it since I am just using position: absolute all the time. I was about using Grid or flexbox but I do not really know if it will help.
* {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
body {
background-color: #f8f8f8;
}
.navigation {
height: 70px;
width: 100%;
background-color: #fff;
box-shadow: 0px 1px 4px #ebebeb;
}
.menu {
position: absolute;
left: 30px;
top: 22px;
opacity: .4;
cursor: pointer;
}
.menu:hover {
opacity: 1;
}
.youtube-logo {
width: 90px;
position: absolute;
left: 70px;
top: 10px;
}
.search-bar {
position: absolute;
top: 21px;
left: 390px;
width: 600px;
height: 33px;
background: url(images/search.svg) no-repeat 95% 50%;
background-size: 16px;
border-radius: 2px;
border: 1px solid #b3b3b3;
padding-left: 20px;
box-sizing: border-box;
outline: none;
}
::placeholder {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
padding-left: 3px;
}
.video {
position: absolute;
left: 1150px;
top: 25px;
cursor: pointer;
opacity: .4;
}
.stack {
position: absolute;
left: 1210px;
cursor: pointer;
width: 18px;
opacity: .4;
top: 27px;
}
.message {
position: absolute;
left: 1265px;
top: 24px;
;
opacity: .4;
cursor: pointer;
}
.bell {
position: absolute;
left: 1320px;
top: 23px;
opacity: .4;
cursor: pointer;
}
.icon {
position: absolute;
top: 16px;
left: 1374px;
cursor: pointer;
width: 36px;
opacity: .4;
}
<nav class="navigation">
<img src="images/menu.svg" alt="menu for the top left, shaped like a hamburger" class="menu">
<img src="images/youtube.logo.png" alt="youtube logo" class="youtube-logo">
<input type="text" name="searchbar" placeholder="Search" class="search-bar">
<img src="images/video.svg" alt="video icon" class="video">
<img src="images/google-app-button.png" alt="square stacks" class="stack">
<img src="images/message-square (1).svg" alt="message forr youtube" class="message">
<img src="images/bell.svg" alt="bell for top right bar" class="bell">
<img src="images/icons8-male-user-512.png" alt="profile picture for the bar" class="icon">
</nav>

Answer 1

Flexbox is pretty straight forward. You only need to set display: flex; on the parent element and the children elements will be affected.
.parent-flex {
display: flex;
}
<h2>Without Flexbox</h2>
<div>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
</div>
<h2>With Flexbox</h2>
<div class="parent-flex">
<div class="child-1">Child 1</div>
<div class="child-2">Child 2</div>
<div class="child-3">Child 3</div>
</div>
Since you are trying to replicate the youtube navbar, I'd recommend using flexbox to setup the "regions" of the navbar and then applying justify-content: space-between; to space out the regions equally.
.flex {
display: flex;
}
.parent {
justify-content: space-between;
}
.child-1 {}
.child-2 {}
.child-3 {
justify-content: flex-end;
}
<div class="flex parent">
<div class="flex child-1">
<div class="menu">[Menu Icon]</div>
<div class="logo">[Logo]</div>
</div>
<div class="flex child-2">
<div class="search-box">[search box]</div>
<div class="search-button">[search button]</div>
</div>
<div class="flex child-3">
<div class="user-photo">[the user's photo]</div>
<div class="etc">[whatever other icons...]</div>
</div>
</div>
You can check out this great article on css-tricks to learn more about the ins and outs of flexbox.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/