align flexbox items side-by-side (Aligning Problem) - css

Question

So i am currently working on a website and i have a problem aligning the flexbox items(logo and title) in the header. They always align underneath each other and i need them side by side.
I read through the similar problems of others in stackoverflow and i also have googled for min. 2 hours.
I have to say learned many things about positioning and flexbox but i can't solve it.
There are many more things that i havent really cared about yet on the website but they don't matter for now, just overlook them :'D
But if you have some Tip's i still would be very thankful cause im new into creating websites :)
#import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#import url('https://fonts.googleapis.com/css?family=Sniglet');
#import url('https://fonts.googleapis.com/css?family=Dosis&display=swap');
#import url('https://fonts.googleapis.com/css?family=Dancing+Script');
/*all*/
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
max-width: 100%;
box-sizing: border-box;
}
* {
box-sizing: inherit;
font-family: 'Dosis', sans-serif;
/*, cursive |zum kursiv*/
}
/*For PC's*/
#media screen and (min-width: 950px) {
.wrapper {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto auto auto;
/*NOT sur about the auto*/
grid-template-areas: "header" "main" "footer";
background-color: #ffc5c9;
}
/*Nav Menu*/
.navigation_wrapper {
position: relative;
}
.navigation_button {
will-change: transform;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
position: fixed;
z-index: 1;
top: 40px;
left: 100px;
background: transparent;
cursor: pointer;
}
.navigation_button .fa {
border: 2px solid white;
border-radius: 3px;
padding: 10px;
color: white;
}
.navigation_menu ul li {
list-style: none;
font-weight: 250;
color: #79E2DD;
/*font-family: impact; könnte hier noch geändert werden*/
}
.navigation_menu {
content: '';
position: fixed;
top: 0;
right: 0;
width: 50%;
background: white;
height: 100%;
transform: skewX(0deg) translate(100%, 0);
transform-origin: top right;
transition: all .2s ease-in;
z-index: -1;
}
.navigation_menu ul {
transform: skewX(-8deg);
transform-origin: top left;
position: fixed;
left: 100px;
top: 100px;
width: 400px;
text-align: left;
}
.navigation_menu ul li {
position: relative;
z-index: 999;
font-size: 32px;
color: #F4E1A6;
line-height: 64px;
}
.navigation_menu ul li a {
border: none;
color: #FFC59;
text-decoration: none;
}
.navigation_menu.active {
transform: skewX(8deg) translate(0, 0);
}
.navigation_menu li {
opacity: 0;
transform: translate(0, 10px);
transition: all .0s ease-in .3s;
}
.navigation_menu.active li {
opacity: 1;
transform: translate(0, 0);
transition: all 0.2s ease-in 0s;
}
.navigation_menu.active li:nth-child(1) {
transition-delay: .3s;
}
.navigation_menu.active li:nth-child(2) {
transition-delay: .4s;
}
.navigation_menu.active li:nth-child(3) {
transition-delay: .5s;
}
.navigation_menu.active li:nth-child(4) {
transition-delay: .6s;
}
.navigation_menu.active li:nth-child(5) {
transition-delay: .7s;
}
.navigation_menu.active li:nth-child(6) {
transition-delay: .8s;
}
/*Scrollbar*/
/*Skeleton*/
.head_wrapper {
grid-area: header;
height: auto;
padding: 3rem 5rem 3rem;
background-image: url("../pictures/TP4.jpeg");
background-size: cover;
background-repeat: no-repeat;
border-radius: 0 0 50px 50px;
}
.main_wrapper {
grid-area: main;
margin: 2rem;
padding: 20px;
min-height: 100%;
background-color: #feeee6;
border-radius: 50px;
}
.foot_wrapper {
background-color: #f4e1a6;
grid-area: footer;
border-radius: 50px 50px 0 0;
}
/*for Sticky Footer*/
.foot_wrapper,
.push {
height: 15rem;
}
/*flex containers*/
.head_flex_container {
display: flex;
justify-content: space-between;
flex-direction: column;
flex-wrap: wrap;
}
/*flex items*/
.head_titel_container {
border: 5px solid blue;
max-height: 22rem;
min-width: 100%;
position: relative;
}
.flex_titel {
position: absolute;
right: 0;
width: 78%;
box-sizing: content-box;
border: 5px solid black;
}
.flex_logo {
width: 22%;
box-sizing: border-box;
border: 5px solid pink;
}
/*Titles*/
h1 {}
h2 {}
/*Texts*/
.index {}
/*classes*/
/*ID's*/
#logo {
height: auto;
min-width: 5rem;
max-width: 20rem;
border-radius: 100%;
box-sizing: border-box;
}
#pb1 {}
/*Decoration*/
hr {}
}
<div class="wrapper">
<div class="scroll_wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="navigation_wrapper">
<div class="navigation_button">
<i class="fa fa-bars"></i>
</div>
<div class="navigation_menu">
<ul>
<li>Home</li>
<li>Gallerie</li>
<li>
Kontakt</li>
<li>
<a class="active" href="hier link rein"></a>
</li>
<li>
<a class="active" href="hier link rein"></a>
</li>
</ul>
</div>
</div>
<header>
<div class="head_wrapper">
<div class="head_flex_container">
<div class="head_titel_container">
<div class="flex_logo"><img src="pictures/Logo.jpeg" alt="Logo" title="El Pastelazo" id="logo"></div>
<div class="flex_titel">
<h1>El Pastelazo</h1>
</div>
</div>
</div>
</div>
</header>
<main class="main">
<div class="main_wrapper">
<div class="home_picture"><img src="pictures/PI.jpg" alt="Picture" title="Loah" id="pb1"></div>
<div class="pagetitle">
<h2>Home</h2>
</div>
<p class="index">
<h3>Wilkommen!</h2>
<hr class="hr_01"> hier kann loah sich und ihre arbeit bzw was Sie auf dieser Website macht eintragen. Damit dieser Text hier möglichst lang ist werde ich einfach irgend ein Scheiss labern. Eigentlich will ich ihn auch nicht wirklich möglichst lang machen sondern
nur so lang, wie auch ungefähr eine Vorstellung bzw Beschreibung sein würde. Ich würde mal sagen, diese länge an Text sollte genügen.
</p>
<div class="push"></div>
</div>
</main>
<footer>
<div class="foot_wrapper">
<a class="foot_item" href="https://www.instagram.com/el_pastelazo_/?hl=de" title="#el_pastelazo_"><i class="fab fa-instagram"></i></a>
<a class="foot_item" href="https://github.com/" title="Probably Insta"><i class="fa fa-github"></i></a>
<a class="foot_item" href="https://www.pinterest.de/" title="Pinterest"><i class="fa fa-pinterest-p"></i></a>
<a class="foot_item" href="https://www.gmx.ch/" title="Mail"><i class="fa fa-envelope-o"></i></a>
</div>
</footer>
</div>

Answer 1

Adding display:flex style to an HTML element by default make its children appear side by side unless you explicitly add flex-direction: column;.
After Looking at your html carefully I see that you have added display:flex to head_flex_container which has only one child i.e head_titel_container.
You could add display:flex property to head_titel_container because it has two children that needs to appear side by side.
<div class="head_titel_container">
<div class="flex_logo"><img src="pictures/Logo.jpeg" alt="Logo" title="El Pastelazo" id="logo"></div>
<div class="flex_titel"><h1>El Pastelazo</h1></div>
</div>
.head_titel_container {
display: flex;
}
Adding display: flex style to .head_titel_container in your css file should make them appear side by side.
Let me know if you have any problems with this approach.

Answer 2

Did you want something like this?
/*flex items*/
.head_titel_container{
border: 5px solid blue;
max-height: 22rem;
width: 50%;
min-width: 50%;
position: relative;
display: inline-block;
}
.flex_titel{
position: absolute;
left:800px;
top:-10px;
width: 78%;
box-sizing: content-box;
border: 5px solid black;
display: inline-block;
}
By the way, there's this website called JSFiddle where you can post your code for a quick demo. Might be useful in the future.