So I'm trying to have the contents of the header justified as space-between to send one to the left and one to the right.

body {
min-height: 960px;
background-color: #222; 
}
header {
min-height: 250px;
display: flex;
justify-content: space-between;
}
#hero {
color: white;
font-size: 155px;
font-family: 'Elsie' cursive;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
#logo {
height: 36px;
width: 67px;

}

.headline::before {
content: "design";
opacity: 0;
animation-name: animate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 0.5s;
position: relative;
display: inline-block;
}

@keyframes animate {
11.1% {content:"design"; opacity: 0; transform: translateY(0);}
22.2% {content: "design"; opacity: 1; transform: translateY(0);}
33.3% {content:"design"; opacity: 0; transform: translateY(20px);}
44.4% {content: "build"; opacity: 0; transform: translateY(0);}
55.5% {content:"build"; opacity: 1; transform: translateY(0);}
66.6% {content: "build"; opacity: 0; transform: translateY(20px);}
77.7% {content: "innovate"; opacity: 0; transform: translateY(0);}
88.8% {content: "innovate"; opacity: 1; transform: translateY(0);}
99.9%{content: "innovate"; opacity: 0; transform: translateY(20px);}
}

<header>
  <img id="logo" src="images/logo-8.png" alt="">
  <nav>
    <a href="#">About</a>
    <a href="#">Work</a>
    <a href="#">Contact</a>
  </nav>
</header>
<section id="hero">
    <div id="lets_wrapper">
        <h1 id="lets">let's</h1>
    </div>
    <div>
        <h1 class="headline"></h1>
    </div>    
    <div id="together_wrapper">
        <p>together</p>
    </div>
</section>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I also tried setting height and width to the children elements but that doesn't seem to work, the logo and the text keep stacking one on top of the other in the top-left corner. There is also another section tag just below that that has a flexbox attribute displaying flex, wrap, column and align-items center. What am I doing wrong? Later edit: I have added all the code I have right now as I think maybe something is conflicting.

CodePudding user response：

I thinnk your code is working fine.

header {
  min-height: 250px;
  display: flex;
  justify-content: space-between;
}

<header>
  <img id="logo" src="images/logo-8.png" alt="This is Logo">
  <nav>
    <a href="#">About</a>
    <a href="#">Work</a>
    <a href="#">Contact</a>
  </nav>
</header>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I found the problem inside my reset.css file as I loaded it after my style.css and it set the header to display: block. Noob mistake, sorry :))