我无法将标题与按钮对齐

Question

I am completely new to CSS and I have a header and a navbar. But when I tried to align the button next to the header it is showing in the navbar line. I tried using the float property but it is still in the navigation line. Here's what it looks like.

HTML

 .wrapper { margin: 0; background-color: #fff; } header { height: 120px; padding: 4px; } header h1 { font-family: "Amatic Sc"; text-transform: uppercase; font-size: 50px; text-align: center; color: #000; } .btn { width: 10; height: 2px; padding: 1.375rem 2.625rem 1.375rem 2.625rem; border: 0.125rem solid #B49DF1; border-radius: 2rem; background-color: #B49DF1; color: #fff; font: 700 0.75rem/0 'Open Sans', arial, sans-serif; text-decoration: none; transition: all 0.2s; } .btn:hover { background-color: #9876F3; border: 0.125rem solid #9876F3; }

 <div class="wrapper"> <header> <h1>Novaturient</h1> <---- Next to this should be the button </header> <nav> <ul> <li class="one"><a href="#home">Home</a></li> <li class="two"><a href="#content">Content</a></li> <li class="three"><a href="#features">Features</a></li> <li class="four"><a href="#about">About</a></li> <li class="fice"><a href="#contact">Contact</a></li> </ul> </nav> </div>

Answer 1

Method1:
We put the button inside the header and styling it's position: to absolute . And styling the header -> position: relative; allowing the button to move freely in the header so we style the button bottom: 0; to make it stick at the bottom of the header .

 .wrapper { margin: 0; background-color: #fff; } header { position: relative; height: 120px; padding: 4px; } header h1 { font-family: "Amatic Sc"; text-transform: uppercase; font-size: 50px; text-align: center; color: #000; } nav ul{ list-style: none; display: flex; justify-content: center; } nav ul li { margin: 0 10px; } .btn { width: 10; height: 2px; padding: 1.375rem 2.625rem 1.375rem 2.625rem; border: 0.125rem solid #B49DF1; border-radius: 2rem; background-color: #B49DF1; color: #fff; font: 700 0.75rem/0 'Open Sans', arial, sans-serif; text-decoration: none; transition: all 0.2s; position: absolute; bottom: 0; } .btn:hover { background-color: #9876F3; border: 0.125rem solid #9876F3; }

 <header> <h1>Novaturient</h1> <!--Here--> <nav> <ul> <li class="one"><a href="#home">Home</a></li> <li class="two"><a href="#content">Content</a></li> <li class="three"><a href="#features">Features</a></li> <li class="four"><a href="#about">About</a></li> <li class="fice"><a href="#contact">Contact</a></li> </ul> </nav> <button class="btn">Learn More</button> </header>

Method2:
The button is outside the header , with the same style position: absolute; , but this time we style the top to 120px ( Equeal to header height ).

 .wrapper { margin: 0; background-color: #fff; } header { position: relative; height: 120px; padding: 4px; } header h1 { font-family: "Amatic Sc"; text-transform: uppercase; font-size: 50px; text-align: center; color: #000; } nav ul{ list-style: none; display: flex; justify-content: center; } nav ul li { margin: 0 10px; } .btn { width: 10; height: 2px; padding: 1.375rem 2.625rem 1.375rem 2.625rem; border: 0.125rem solid #B49DF1; border-radius: 2rem; background-color: #B49DF1; color: #fff; font: 700 0.75rem/0 'Open Sans', arial, sans-serif; text-decoration: none; transition: all 0.2s; position: absolute; top: 120px; } .btn:hover { background-color: #9876F3; border: 0.125rem solid #9876F3; }

 <header> <h1>Novaturient</h1> <!--Here--> <nav> <ul> <li class="one"><a href="#home">Home</a></li> <li class="two"><a href="#content">Content</a></li> <li class="three"><a href="#features">Features</a></li> <li class="four"><a href="#about">About</a></li> <li class="fice"><a href="#contact">Contact</a></li> </ul> </nav> </header> <button class="btn">Learn More</button>