I am brand new to CSS and I have set up a header and a navbar. However, when attempting to position the button next to the header, it is appearing in the navbar line instead. I have tried using the float property, but the issue remains. Here is a snippet of the code:
Sample Code
.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>
<---- Button should be placed next to this </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>