Fix image and name position
I'm trying to code a website, but the image and name (Administracija) appear on the left side, but they should appear where the search bar is.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
:root {
--main-color: #DD2F6E;
--color-dark: #1D2231;
--text-grey: #8390A2;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.sidebar {
width: 345px;
position: fixed;
left: 0;
top: 0;
height: 100%;
background: var(--main-color);
}
.sidebar-brand {
height: 90px;
padding: 1rem 0rem 1rem 2rem;
color: #fff;
}
.sidebar-brand span {
display: inline-block;
padding-right: 1rem;
}
.sidebar-menu {
margin-top: 1rem;
}
.sidebar-menu li {
width: 100%;
margin-bottom: 1.7rem;
padding-left: 2rem;
}
.sidebar-menu a {
display: block;
color: #fff;
font-size: 1.1rem;
}
.sidebar-menu a.active {
background: #fff;
padding-top: 1rem;
padding-bottom: 1rem;
color: var(--main-color);
border-radius: 30px 0px 0px 30px;
}
.sidebar-menu a span:first-child {
font-size: 1.5rem;
padding-right: 1rem;
}
.main-content {
margin-left: 345px;
}
header {
display: flex;
justify-content: space-between;
padding: 1rem;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.search-wrapper {
border: 1px solid #ccc;
border-radius: 30px;
height: 50px;
display: flex;
align-items: center;
overflow-x: hidden;
}
.search-wrapper span {
display: inline-block;
padding: 0rem 1rem;
font-size: 1.5rem;
}
.search-wrapper input {
height: 100%;
padding: .5rem;
border: none;
outline: none;
}
.user-wrapper {
display: flex;
align-items: center;
}
.user-wrapper img {
border-radius: 50%;
margin-right: 1rem;
}
.user-wrapper small {
display: inline-block;
color: var(--text-grey);
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<title>Bibliotekos administracija</title>
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<div class="sidebar-brand">
<h2><span class="lab la-accusoft"></span> Biblioteka</h2>
</div>
<div class="sidebar-menu">
<ul>
<li>
<a href="" class="active"><span class="las la-home"></span>
<span>Pradžia</span></a>
</li>
<li>
<a href=""><span class="las la-clipboard"></span>
<span>Knygų sąrašas</span></a>
</li>
<li>
<a href=""><span class="las la-book"></span>
<span>Paimtos knygos</span></a>
</li>
</ul>
</div>
</div>
<div class="main-content">
<header>
<h2>
<label for="">
<span class="las la-bars" ></span>
</label> Pradžia
</h2>
<div class="search-wrapper">
<span class="las la-search"></span>
<input type="search" placeholder="Search here" />
</div>
</header>
<div class="user-wrapper">
<img src="img/among.jpg" width="40px" height="40px" alt="">
<div>
<h4>Administracija</h4>
</div>
</div>
<main>
<div class="cards">
<div class="card-single">
<div>
<h1>0</h1>
<span>Knygų</span>
</div>
<div>
<span class="las la-books"></span>
</div>
</div>
</div>
</main>
</div>
</body>
</html>
So I'm watching a video on how to make an admin website and in that video there is a step where the admin's name and picture should appear in the upper right corner where my search bar is now but it doesn't it just stays Does anyone on the left know how to solve this problem?
