After spending hours on this problem, I attempted to use "float: right" and successfully moved the button to the right. However, in doing so, the tag is no longer vertically centered.
Can someone please assist me with this? Also, if there are multiple solutions to this issue, I would greatly appreciate seeing them.
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin:0;
}
h1{
margin: 5rem 0 0 1.5rem;
}
.main-nav{
background-color: #2ddd5c;
position: fixed;
top:0;
width: 100vw;
z-index: 1;
padding: 0.5rem 1rem;
}
.main-nav-brandtitle {
display: inline-block;
vertical-align: middle;
padding-left: 0.5rem;
}
.main-nav-brandtitle a{
height: 2.3rem;
vertical-align: middle;
}
.main-nav-butaum{
display: inline-block;
vertical-align: middle;
}
.toggle-button {
width: 3rem;
background: transparent;
border: none;
cursor: pointer;
padding-top: 0;
padding-bottom: 0;
vertical-align: middle;
text-align: center;
}
.toggle-button__bar {
width: 100%;
height: 0.2rem;
background: black;
display: block;
margin: 0.6rem 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="../shared4.css">
<link rel="stylesheet" href="hosting.css">
<title>test</title>
</head>
<body>
<div class=backdrop>
</div>
<header>
<nav class= "main-nav">
<div class="main-nav-brandtitle">
<a href="../index.html"><img src="" alt = "">Hellou</a>
</div>
<div class="main-nav-butaum">
<button class="toggle-button">
<span class="toggle-button__bar"></span>
<span class="toggle-button__bar"></span>
<span class="toggle-button__bar"></span>
</button>
</div>
</nav>
</header>
<main>
<h1>test</h1>
</main>
</body>
</body>
</html>