This is basically a youtube clone which i am working on. The contents of the sidebar should be in the middle. But i am not able to bring the contents to the middle.
The html code for the sidebar is given bellow
<div class="sidebar">
<div class="home">
<img class="home-img" src="./sidebar-icons/home.svg" alt="">
<p class="hp">Home</p>
</div>
<div class="explore">
<img class="explore-img" src="./sidebar-icons/explore.svg" alt="">
<p class="ep">Explore</p>
</div>
<div class="subscriptions">
<img class="subscriptions-img" src="./sidebar-icons/subscriptions.svg" alt="">
<p class="sp">Subsriptions</p>
</div>
<div class="originals">
<img class="originals-img" src="./sidebar-icons/originals.svg" alt="">
<p class="op">Originals</p>
</div>
<div class="youtube-music">
<img class="youtube-music-img" src="./sidebar-icons/youtube-music.svg" alt="">
<p class="yp">Youtube Music</p>
</div>
<div class="library">
<img class="library-img" src="./sidebar-icons/library.svg" alt="">
<p class="lp">Library</p>
</div>
</div>
Given below is the CSS code which I am using
.sidebar{
background-color:rgb(175, 146, 146);
width: 100px;
display: flex;
flex-direction: column;
position: fixed;
align-items: center;
bottom: 0;
left: 0;
top:72px;
padding-top: 15px;
}
p{
margin: 0;
margin-bottom: 24px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12px;
}
.home-img{
width: 24px;
}
.home{
width: 100%;
}
.explore-img{
width: 24px;
}
.explore{
width: 100%;
}
.subscriptions-img{
width: 24px;
}
.subscriptions{
width: 100%;
}
.originals-img{
width: 24px;
}
.originals{
width: 100%;
}
.youtube-music-img{
width: 24px;
}
.youtube-music{
width: 100%;
}
.library-img{
width: 24px;
}
.library{
width: 100%;
}
I am expecting the sidebar to look like below :