Trying to get banner inside of the header - html

Question

I am trying to get a banner with "slogan" and an image to appear inside the header area. When I write it out it appears below the header section, and I cannot figure out how to get it inside the header area.
I would also like to make it responsive. So I would like the "slogan" to move up and the image to move below the "slogan" when it reaches less than 768px
Thanks
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Cabin', sans-serif;
}
/* Header */
.header-image {
background-image: url('https://images.unsplash.com/photo-1472376758045-62f519fc676d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8300925c51f6d651fa7cb9c41eaafb45&auto=format&fit=crop&w=2850&q=80');
background-position: center;
background-size: cover;
background-attachment: scroll;
color: white;
width: 100%;
height: 49em;
}
.header-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 49em;
}
.logo {
grid-column: 1;
display: flex;
justify-content: flex-start;
margin-left: .5em;
}
.nav-header {
grid-column: 2;
list-style: none;
display: flex;
justify-content: space-around;
}
/* Banner */
.slogan,
.banner {
margin: 0;
}
.banner-image {
width: 15em;
height: 15em;
border-radius: 50%;
}
<!-- HEADER -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="logo">STARTUP NAME</h1>
<nav>
<ul class="nav-header">
<li class="navmenu">Services</li>
<li class="navmenu">Pricing</li>
<li class="navmenu">Contact</li>
</ul>
</nav>
</div>
</header>
<!-- BANNER -->
<section class="main-banner">
<div class="banner-container">
<h1 class="slogan banner">Some Cool Slogan</h1>
<span class="slogan banner">A cool subtitle explaining said cool Slogan</span>
<img class="banner-image banner" src="https://images.unsplash.com/photo-1532007271951-c487760934ae?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f7ad947fb913065733cd1494ed95ef59&auto=format&fit=crop&w=1100&q=80" alt="">
</div>
</section>

Answer 1

I adjusted the code to have a wrapper around the title and to have it at the center of the page. And added media query CSS to come one below the other in mobile
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Cabin', sans-serif;
}
/* Header */
.header-image {
background-image: url('https://images.unsplash.com/photo-1472376758045-62f519fc676d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8300925c51f6d651fa7cb9c41eaafb45&auto=format&fit=crop&w=2850&q=80');
background-position: center;
background-size: cover;
background-attachment: scroll;
color: white;
width: 100%;
height: 49em;
}
.header-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 49em;
}
.logo {
grid-column: 1;
display: flex;
justify-content: flex-start;
margin-left: .5em;
}
.nav-header {
grid-column: 2;
list-style: none;
display: flex;
justify-content: space-around;
}
/* Banner */
.slogan,
.banner {
margin: 0;
}
.banner-image {
width: 15em;
height: 15em;
border-radius: 50%;
}
section.main-banner {
position: absolute;
width:100%;
text-align:center;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.sloganWrapper{
display:inline-block;
vertical-align: middle;
}
img.banner-image.banner {
vertical-align: middle;
}
#media only screen and (max-width:767px){
.sloganWrapper{
display:block;
}
}
<!-- HEADER -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="logo">STARTUP NAME</h1>
<nav>
<ul class="nav-header">
<li class="navmenu">Services</li>
<li class="navmenu">Pricing</li>
<li class="navmenu">Contact</li>
</ul>
</nav>
</div>
</header>
<!-- BANNER -->
<section class="main-banner">
<div class="banner-container">
<div class="sloganWrapper">
<h1 class="slogan banner">Some Cool Slogan</h1>
<span class="slogan banner">A cool subtitle explaining said cool Slogan</span></div>
<img class="banner-image banner" src="https://images.unsplash.com/photo-1532007271951-c487760934ae?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f7ad947fb913065733cd1494ed95ef59&auto=format&fit=crop&w=1100&q=80" alt="">
</div>
</section>

Answer 2

I think it's because your .main-banner is not being contained in the header.
Try making header position: absolute; and then move the banner image to .main-banner
See if it's what you need...
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Cabin', sans-serif;
}
/* Header */
.header-wrapper {
position: absolute;
top: 0;
left: 0;
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
color: #fff;
}
.logo {
grid-column: 1;
display: flex;
justify-content: flex-start;
margin-left: .5em;
}
.nav-header {
grid-column: 2;
list-style: none;
display: flex;
justify-content: space-around;
}
/* Banner */
.main-banner {
padding-top: 100px;
background-image: url('https://images.unsplash.com/photo-1472376758045-62f519fc676d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8300925c51f6d651fa7cb9c41eaafb45&auto=format&fit=crop&w=2850&q=80');
background-position: center;
background-size: cover;
background-attachment: scroll;
color: white;
width: 100%;
height: 49em;
margin-bottom: 20px;
}
.slogan,
.banner {
margin: 0;
}
.banner-image {
width: 15em;
height: 15em;
border-radius: 50%;
}
<!-- HEADER -->
<header>
<div class="header-wrapper">
<h1 class="logo">STARTUP NAME</h1>
<nav>
<ul class="nav-header">
<li class="navmenu">Services</li>
<li class="navmenu">Pricing</li>
<li class="navmenu">Contact</li>
</ul>
</nav>
</div>
</header>
<!-- BANNER -->
<section class="main-banner">
<div class="banner-container">
<h1 class="slogan banner">Some Cool Slogan</h1>
<span class="slogan banner">A cool subtitle explaining said cool Slogan</span>
<img class="banner-image banner" src="https://images.unsplash.com/photo-1532007271951-c487760934ae?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f7ad947fb913065733cd1494ed95ef59&auto=format&fit=crop&w=1100&q=80" alt="">
</div>
</section>
Testing