I'm new to CSS and web development and trying to build my own and first website. I've read a few articles related to displaying and positioning elements however I still unable to get elements positioned perfectly while resizing the browser window!.
What I am trying to accomplish is in the codepen link in the first comment below
https://codepen.io/letsimoo/pen/XWNGoGa
HTML CODE
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
</head>
<body class="mainBody">
<header class="mainHeader">
<div class="headerStuff">
<div class="social-list">
<div class="fb">
FB
</div>
<div class="twitter">
Twitter
</div>
<div class="instagram">
Instagram
</div>
</div>
<ul class="navigation">
<li> <b>My Projects</b> </li>
<li> <b>Gallery</b> </li>
<li> <b> About </b> </li>
<li> <b>Contact</b> </li>
</ul>
<div class="logoDiv">
<h2>Logo</h2>
</div>
</div>
<div class="HeaderLine"></div> <!-- Header Separator Line -->
</header>
</body>
CSS CODE
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.mainBody {
background-color: gray;
background-size: cover;
background-repeat: no-repeat;
color: white;
margin: 0px 0px 0px 20px;
/*width: 100%;*/
}
.mainHeader {
height: 80px;
}
.headerStuff {
height: auto;
display: flex;
position: relative;
align-items: bottom;
vertical-align: baseline;
width: 100%;
}
.social-list {
display: inline-flex;
position: absolute;
margin-top: 20px;
left: -10px;
}
.social-list div {
margin-left: 12px;
}
.navigation {
position: absolute;
right: 175px;
text-align: right;
height: 30px;
padding: 0px;
margin: 0px;
margin-top: 30px;
display: flex;
}
.navigation li {
background-color: #22385b;
display: inline-block;
margin-left: 5px;
padding: 7px 5px 7px 5px;
border-radius: 7px;
font-size: 20px;
width: 90px;
color: white;
}
.navigation li:hover {
background-color: #446291;
}
.navigation li a {
color: white;
font-size: 14px;
font-family: "Chakra Petch", sans-serif;
text-align: center;
text-decoration: none;
display: block;
}
ul li .prayer-window {
background-color: rgba(237, 239, 242, 0.9);
margin-top: 20px;
width: 400px;
height: 400px;
position: relative;
z-index: 1;
opacity: 0;
box-shadow: 0px 0px 100px black;
transition: 1s opacity, 5s width, 5s height;
}
.prayer-time:hover {
color: hotpink;
}
.prayer-time:active ~ .prayer-window {
opacity: 1;
}
.logoDiv {
position: absolute;
right: 0px;
}
.logoDiv img {
width: 150px;
}
.HeaderLine {
box-sizing: border-box;
height: 2px;
margin-top: 68px;
margin-right: 175px;
text-align: center;
background-color: pink;
box-shadow: 2px 2px 4px black, 0 0 30px red, 0 0 5px darkblue;
}
Please have a look to my code in the above link and try to resize the browser window to the minimum size
What the problem I'm facing?
Definitely you've notices how is the navigation elements jumped over the social media dev after resizing the browser window
So how can avoid this ugly act from the headerStuff div!??
Also please help me to improve my question if there are something wrong in my description or in the mentioned tags
Your .navigation .sosial-list are positioned absolute. That means they are out of the order of the other elements and does not take space by the other content.
As absolute positioned element .navigation is allways relative to the next parent element which is not positioned static. In your project it is .header-stuff. At the same time the margin-top moves it down from the top edge of header-stuff ...
So, if the screen becomes narrow your .header-stuff becomes narrow also. And your navigation keeps still in place: 175px from right edge of .header stuff and 30pxmargin from top ... that make it layered above your socials.
If you want to keep your structure enlarge the margin-top for .navigation so the navigation has still place enough to move below the social information.
But if you are open to change your sturcture you don't need an absolute positioning. Use a structure with block elements so socials and navigations are still beneath and don't layer over each other.
Just easy DEMO code structure example to explain the idea:
// css structure DEMO
nav {
display: block;
}
ul {
/* align ul to right */
margin-right: 0;
margin-left: auto;
}
li {
/* align li's into a line */
display: inline-block;
}
header hr {
... style your subheader line ...
}
// html structure DEMO
<header>
<div class="top-header>
... your socials ...
</div>
<nav>
<ul>
<li></li>
...
</ul>
</nav>
<hr>
</header>
Here's your updated updated CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.mainBody {
background-color: gray;
background-size: cover;
background-repeat: no-repeat;
color: white;
/* margin: 0px 0px 0px 20px; */
}
.headerStuff {
height: 80px;
display: flex;
position: relative;
vertical-align: baseline;
width: 100%;
justify-content: space-between;
align-items: center;
}
.social-list {
display: inline-flex;
}
.social-list div {
margin-left: 12px;
}
.navigation {
margin: 0;
}
.navigation li {
background-color: #22385b;
display: inline-block;
padding: 7px 5px 7px 5px;
border-radius: 7px;
font-size: 20px;
width: 90px;
color: white;
}
.navigation li:hover {
background-color: #446291;
}
.navigation li a {
color: white;
font-size: 14px;
font-family: 'Chakra Petch', sans-serif;
text-align: center;
text-decoration: none;
display: block;
}
ul li .prayer-window {
background-color: rgba(237, 239, 242, 0.9);
margin-top: 20px;
width: 400px;
height: 400px;
position: relative;
z-index: 1;
opacity: 0;
box-shadow: 0px 0px 100px black;
transition: 1s opacity, 5s width, 5s height;
}
.prayer-time:hover {
color: hotpink;
}
.prayer-time:active ~ .prayer-window {
opacity: 1;
}
.logoDiv h2 {
margin: 0;
}
.logoDiv img {
width: 150px;
}
.HeaderLine {
box-sizing: border-box;
height: 2px;
margin: 0 auto;
text-align: center;
background-color: pink;
box-shadow: 2px 2px 4px black, 0 0 30px red, 0 0 5px darkblue;
}
You can adjust css properties for specific screen sizes via media queries.
#media only screen and (max-width: 796px) {
//
}
PS. align-items:bottom is not really a thing. Probably you meant align-items:baseline
Related
I'm trying to right align a div on my navigation bar for my website. The goal is to align the div so it's always aligned in the same place towards the right of the webpage. I've tried margins, CSS positioning, and changing the div to display: inline-block;
body {
overflow-x: hidden;
font-size: large;
margin: 0;
}
h1,
h2,
h3,
h4 {
font-family: 'Montserrat', sans-serif;
}
.nav-bar {
z-index: 98;
background-color: rgba(204, 204, 204, 0.8);
padding: 15px;
}
.nav-img {
height: 100px;
}
.nav-options {
text-align: right;
}
.nav-option {
border: none;
background-color: rgba(204, 204, 204, 0.1);
height: 100px;
width: 150px;
font-size: large;
cursor: pointer;
transition: all 0.5s ease-out;
position: relative;
bottom: 15px;
}
.nav-option:hover {
background-color: rgba(204, 204, 204, 0.1);
color: white;
}
p,
ul,
ol,
li,
select {
font-family: 'Poppins', sans-serif;
}
.line {
width: 50px;
background-color: white;
z-index: 99;
height: 0.5px;
}
.hamburger-menu {
background-color: transparent;
border: none;
display: inline-block;
}
.mobile-nav {
display: none;
}
.mobile-menu {
margin: 50px;
padding: 0;
z-index: 98;
position: fixed;
right: 0%;
bottom: -6%;
background-color: rgba(204, 204, 204, 0.8);
width: 100%;
height: 110%;
margin-left: auto;
margin-right: auto;
padding: 50px;
}
.mobile-options {
position: absolute;
list-style: none;
top: 0;
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
height: 110%;
}
.mobile-option {
width: 100%;
height: 50px;
font-size: large;
letter-spacing: 2px;
line-height: 100%;
text-align: center;
background-color: rgba(204, 204, 204, 0.8);
border: none;
padding-right: 60px;
}
.exit-btn {
width: 50px;
background-color: transparent;
border: none;
font-size: 4rem;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: lighter;
float: right;
position: absolute;
bottom: 75%;
left: 75%;
}
#media screen and (max-width: 830px) {
.desktop-nav {
display: none;
}
.mobile-nav {
display: inline-block;
}
}
<div class="nav-bar">
<nav class="desktop-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="nav-option">About Us</button>
<button class="nav-option">Classes</button>
<button class="nav-option">Contact Us</button>
</div>
</nav>
<nav class="mobile-nav">
<img src="https://picsum.photos/100" class="nav-img">
<div class="nav-options">
<button class="hamburger-menu" id="mobile-menu-enter">
<div class="line"></div><br>
<div class="line"></div><br>
<div class="line"></div>
</button>
</div>
</nav>
</div>
You can use float: right;.
You can also find other solutions here How do I right align div elements?
You could use position absolute to remove the element from the DOM and move your element anywhere relative to the first containing parent element up the DOM tree that has a position set. Then use positioning props like top, right, bottom and/or left to move the element on the page.
See MDN on position for more info
:root {
--padding: .5em;
}
/* This is the parent element, set its position to relative
so the right-div will be positioneed relative to it */
#parent {
background: red;
padding: .5em;
position: relative;
}
#first-div {
background: yellow;
padding: var(--padding);
}
p {
padding: var(--padding);
background: white;
}
/* set this divs position to absolute so its top, left, bottom, right
positioning props will be relative to its closest parent set to relative */
#right-div {
position: absolute;
right: calc(var(--padding) + 0px);
top: calc(var(--padding) + 0px);
background: green;
color: white;
padding: var(--padding);
<div id="parent">
<div id="first-div">This is the first div</div>
<p>This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a
paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph</p>
<div id="right-div">This is the right div</div>
</div>
I ended up setting the position to absolute and using vw as the property for the left attribute.
.hamburger-menu {
background-color: transparent;
border: none;
position: absolute;
left: 80vw;
margin-right: 5vw;
}
I'm using this dark mode toggle that affect all the text plus the background color and when I click on it the colors they switch. But I have a problem with the circles that I've designed. I'd like the dark mode affect the background color of them, having the background inside the circles "lime" on the black background and viceversa. Here's the code and the link to the page:
https://civitonia.com/26993899
HTML:
<div class="grid">
<div class="cell">
<div class="inner">
<div class="circle" style="background-image:url('https://freight.cargo.site/t/original/i/655f74e74d3b88cc9d367ba8cccd79680c3837a84a547f9e03b6f39981f424e0/3.png');"></div>
<div class="caption">
<h3>Chiara Bersani <br> Marta Montanini</h3>
</div>
</div>
</div>
DARK MODE CSS:
.colorOuterSVG {
color: black;
margin-top: 2em;
padding: 0.5em
}
.colorOuterSVG .dark { display: none }
.colorOuterSVG .light { display: block }
.dark-mode .colorOuterSVG {color:#d9ff76!important; }
.dark-mode .colorOuterSVG .dark { display: block }
.dark-mode .colorOuterSVG .light { display: none }
.colorSVG { display: block }
.colorSVG path { fill: currentColor }
.dark-mode {
background-color: black!important;
color: #d9ff76!important;
}
.dark-mode button {
color: black!important;
background-color: #d9ff76;
padding: 5px 5px 5px 5px;
border-radius: 15px;
border: solid 1px #000000;
cursor: pointer;
position: absolute;
bottom: 10px;
}
THE CIRCLES MADE WITH CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.grid {
display: flex;
flex-wrap: wrap;
max-width: 980px;
width: 100%;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
align-items : flex-start
}
.cell:before {
padding-bottom: 100%;
display: block;
content: '';
}
.circle {
width: 250px;
height: 250px;
border: 0.5px solid;
border-radius: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
box-shadow: 0px 0px 15px 0px;
overflow: hidden;
margin: 0 auto 1em;
background-color: #d9ff76!important;
}
.circle img {
width: 100%;
position: relative;
height: 100%;
}
h3 {
text-align: center;
}
.inner {
text-align: start;
padding-bottom: 30%;
}
Right now I've set up a background color for the circles and if I take it away the background will stay lime on lime and black on black!
Add this css code for dark mode :
.dark-mode .circle {
background-color: #000 !important;
}
Why isnt my hover going across the entire side bar? I need the sidebar hover to be able to go across the entire sidebar instead of just that little bit. How would I fix this?
#main-container {
display: table;
width: 100%;
height: 100%;
}
#sidebar {
font-family: sans-serif;
display: table-cell;
width: 3.7%;
vertical-align: top;
background-color: #0E4D92;
}
#sidebar a {
display: block;
padding: 10px;
color: rgba(255, 255, 255);
margin: 15px 30px 0 0;
text-decoration: none;
position: relative;
left: 30px;
}
#sidebar a:hover {
background-color: #73C2FB;
}
#content {
display: table-cell;
width: 85%;
vertical-align: top;
padding: 10px 0 0 10px;
}
<div id="main-container">
<div id="sidebar">
<img src="img/LetterLogo.png" />
Home
Order
Portfolio
History
</div>
</div>
The problem is caused by the way you create the index of the #sidebar a - using left: 30px with position: relative. Remove both, and use padding: 10px 10px 10px 40px; instead. In this way, the background would start from the left edge, and text would still be indented inwards.
#main-container {
display: table;
width: 100%;
height: 100%;
}
#sidebar {
font-family: sans-serif;
display: table-cell;
width: 3.7%;
vertical-align: top;
background-color: #0E4D92;
}
#sidebar a {
display: block;
padding: 10px 10px 10px 40px;
color: rgba(255, 255, 255);
margin: 15px 30px 0 0;
text-decoration: none;
}
#sidebar a:hover {
background-color: #73C2FB;
}
#content {
display: table-cell;
width: 85%;
vertical-align: top;
padding: 10px 0 0 10px;
}
<div id="main-container">
<div id="sidebar">
<img src="img/LetterLogo.png" />
Home
Order
Portfolio
History
</div>
</div>
I have been trying for hours with different methods to get my navigation buttons to be mobile-responsive and collapse in a specified vertical order. I want the nav buttons to collapse in a vertical column below the two logos, once the screen size is shrunken (to around 500px). How do I fix my code to achieve this?
.container-fluid {
border: 1px solid #000000;
max-width: 1600px;
overflow: hidden;
}
.wrap {
/*background-color: yellow;*/
/*overflow: hidden;*/
}
.Logos {
width: 312px;
display: inline-block;
/*background-color: blue;*/
}
/*
.Logos img{
max-width: 300px;
height: auto;
}
*/
.nav.wrap.one {
display: inline-block;
/*background-color: green;*/
float: right;
margin-top: 25px;
}
ul.navigation {
font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
/*text-align center;*/
/*border: 1px solid green;*/
/*overflow: hidden;*/
}
.navigation li {
display: inline-block;
}
.navigation a {
background: #395870;
background: linear-gradient(#49708f, #293f50);
border-right: 1px solid rgba(0, 0, 0, .3);
color: #fff;
padding: 12px 20px;
text-decoration: none;
}
.navigation a:hover {
background: #314b0;
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
border-right: 0;
border-radius: 0 4px 4px 0;
}
.row.two {
background-image: url(https://s1.postimg.org/5gvbly4hin/East_Hyde_Park_Chicago_aerial_0470.jpg);
background-position: absolute;
background-size: cover;
background-repeat: no-repeat;
max-width: 100%;
height: 550px;
margin: auto;
}
.floater.box {
background-color: rgba(255, 255, 255, .40);
border-radius: 10px;
/*opacity: .45;*/
max-width: 75%;
height: 200px;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
}
.form-search {
margin: 0 auto;
text-align: center;
font: bold 13px sans-serif;
max-width: 325px;
position: relative;
}
.form-search input {
width: 230px;
box-sizing: border-box;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
background-color: #ffffff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
padding: 14px 15px 14px 40px;
border: 1px solid #b6c3cd;
;
border-right: 0;
color: #4E565C;
outline: none;
margin-top: 70px;
-webkit-appearance: none;
}
.form-search button {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
background-color: #6caee0;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
color: #ffffff;
padding: 15px 22px;
margin-left: -4px;
cursor: pointer;
border: none;
outline: none;
}
.form-search i {
position: absolute;
top: 15px;
left: 20px;
font-size: 16px;
color: #80A3BD;
}
/* Placeholder color */
.form-search input::-webkit-input-placeholder {
color: #879097;
}
.form-search input::-moz-placeholder {
color: #879097;
opacity: 1;
}
.form-search input:-ms-input-placeholder {
color: #879097;
}
.nav.wrap.two {
display: inline-block;
text-align: center;
width: 100%;
margin-top: 10px;
}
<div class="container-fluid">
<!-- Top Box -->
<div class="wrap">
<div class="Logos">
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" />
<img src="https://s26.postimg.org/iqkxecqnd/Coldwell_Banker-_Logo_RS1.jpg" width="150" height="82" class="img-responsive" /> </div>
<div class="nav wrap one">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-ONE">LOG IN</li>
<li id="NAV-TWO">BUY A HOME</li>
<li id="NAV-THREE">SELL A HOME</li>
<li id="NAV-FOUR">CONTACT US</li>
</ul>
</div>
</div>
<!-- Middle Box -->
<div class="row two">
<div>
<div class="floater box">
<form class="form-search" method="get" action="#">
<input type="search" name="search" placeholder="I am looking for..">
<button type="submit">Search</button>
<i class="fa fa-search"></i>
</form>
</div>
</div>
</div>
</div>
<!-- Bottom Box -->
<div class="row three">
<div class="nav wrap two">
<!--navigation buttons-->
<ul class="navigation">
<li id="NAV-A">MY LISTINGS</li>
<li id="NAV-B">COMMUNITIES SERVED</li>
<li id="NAV-C">PROPERTIES</li>
</ul>
</div>
</div>
</div>
Here is a link to my CodePen: https://codepen.io/IDCoder/full/rGWeEE/
CSS is all about be natural order, natural position, natural styles... what I means is that your code isn't being natural, you can see here:
.navigation li {
display: inline-block;
}
.navigation a {
padding: 12px 20px;
}
I want to focus me in those properties because here we are saying:
You <a> element that are inside this man -> <li> (<li id="NAV-ONE">LOG IN</li>), yes you! You will be bigger even if you're inside him!
Well, in real life, we can't put bigger things into smaller spaces. What happens in real life and CSS is: smaller things into bigger things.
So if we make this change:
.navigation li {
display: inline-block;
padding: 12px 20px;
}
.navigation a {
/* We changed who is bigger than who */
}
It takes a natural order (because now the spaces where .navigation a will be is bigger than him). The final code is something like this (this will wrap when you use phone):
.navigation li {
display: inline-block;
padding: 12px 20px;
background: linear-gradient(#49708f, #293f50);
background: #395870;
border-right: 1px solid rgba(0, 0, 0, .3);
}
.navigation a {
color: #fff;
text-decoration: none;
}
More
I was playing and I found this cool way to wrap when screen is small, I think it's cool:
#media all and (max-width: 500px){
ul.navigation{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
}
Also, remember that when you want to make responsive design you need meta:viewport into your html's head:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Im trying to make the height of the "mainbar" div stretch the entire page without there being a need for the vertical scrollbar while also making sure I can see the top of the div. when I remove the "margin-top" value from the "mainbar" css it removes the scrollbar but cuts off the top 50px. How would I move the div 50px lower (so I can see all of the content inside of it) without extending the page and adding the scrollbar back?
Here is the html:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
</div>
</body>
</html>
Here is the css
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 45px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
body > .mainbar {
background-color: #8729a5;
background-color: black;
height: 90vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
overflow-y: auto
}
new slimScroll(Element);
<!DOCTYPEhtml>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<script src="slimscroll.js"></script>
</head>
<body>
<div class="navbar">
<ul>
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Upload</li>
</ul>
</div>
<div class="mainbar">
<h1>hello</h1>
<h2>whats up</h2>
<h2>whats up</h2>
</div>
</body>
Looked at : https://github.com/kamlekar/slim-scroll
and Hide scroll bar, but still being able to scroll
Not sure if that is what you wanted but the plugin removed the scrollbar on the right of the page >>
So the problem, it seems, is that you have a fixed height for navbar, and want mainbar to take the remainder of the screen.
With mainbar having a height of 100vh it will be as tall as the viewport; so anything you do to move it down 50px will cause the scrollbar to appear. This is the headache of mixing pixel sizes and relative (%, vh/vw) sizes.
If your target browser(s) support modern CSS, a flexbox is the solution to this problem.
If not, the "old way" is to use JavaScript to adjust the size of your mainbar div after the initial CSS-based layout is calculated; a pure CSS solution didn't exist before flexbox.
Try modifing your CSS maybe it will solve the problem.
margin-top to padding-top for the .mainbar.
* {
box-sizing: border-box;
}
body {
background-color: #450068;
background-color: rgb(69, 0, 104);
margin: 0px;
padding: 0px;
}
h1, h2 {
text-align: center;
color: white;
}
li {
display: inline;
text-align: right;
list-style: none;
padding: 20px;
}
.navbar {
background-color: #8729a5;
border-bottom: .5px solid gray;
width: 100%;
height: 50px;
position: fixed;
top: 0;
padding: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.mainbar {
background-color: #8729a5;
background-color: black;
height: 100vh;
width: 1100px;
margin-left: auto;
margin-right: auto;
padding-top: 50px; /* here */
border: .5px solid gray;
border-radius: 15px;
overflow: scroll;
overflow-x: hidden;
}