list has 8 items but the the last 4 items moves out from the blue background in testimonials-section - javascript

As i am running the html and css code the list of testimonials are 8 but , when i increased the size of the screen to 950px the list of 8 items start coming out of the background, so please can anyone give me the hint that where the code is wrong
const mobileBtn = document.getElementById('mobile-cta');
nav = document.querySelector('nav');
mobileBtnExit = document.getElementById('mobile-sta');
mobileBtn.addEventListener('click' , () => {
nav.classList.add('mobile-menu');
})
mobileBtnExit.addEventListener('click' , () => {
nav.classList.remove('mobile-menu');
})
:root {
--primary-color: #007af3;
}
body{
background: #F2F2F2;
margin: 0 ;
font-family: 'Poppins';
}
.navbar {
background: white;
padding: 1em;
.logo{
text-decoration: none;
font-weight: bold;
color: black ;
font-size: 1.2em;
span {
color: var(--primary-color);
}
}
nav{
display: none;
}
.container{
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
}
}
a{
color: #444444;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section{
padding: 5em 2em;
}
.hero{
text-align: center;
}
.left-col{
.subhead{
text-transform: uppercase;
font-weight: bold;
color: gray;
letter-spacing: .3em;
}
h1{
font-size: 2.5em;
line-height: 1.3em;
margin-top: .2em;
}
.primary-cta{
background: var(--primary-color);
color: white;
text-decoration: none;
padding: .6em 1.3em;
font-size: 1.4em;
border-radius: 5em;
font-weight: bold;
display: inline-block;
}
.watch-video-cta{
display: block;
margin-top: 1em;
img {
margin-right: .5em;
}
}
}
.hero-img{
width: 70% ;
margin-top: 3em;
}
section.features-section{
background: #20272e;
color: white;
}
ul.feature-list{
margin: 0;
padding-left: .1em;
display: grid;
grid-template-columns: repeat(auto-fit , minmax(19rem, 1fr));
li{
font-size: 1.1em;
margin-bottom: 1em;
margin-left: 2em;
position: relative;
&:before{
content: '';
left: -2em;
position: absolute;
width: 20px;
height: 20px;
background-image: url('../2021frontend/images/bullet.svg');
background-size: contain;
margin-right: .5em;
}
}
}
.features-section img{
display: none;
}
.testimonials-section{
background: var(--primary-color);
color: white;
li{
width: #006bd6;
text-align: center;
padding: 2em 1em;
width: 75%;
margin: 0 auto 5em auto;
border-radius: 1em;
img{
width: 5em;
height: 5em;
border: 5px solid #006bd6;
border-radius: 50%;
margin-top: -4.5em;
}
}
}
h2{
font-size: 2em;
}
label{
display: block;
font-size: 1.2em;
margin-bottom: .5em;
}
input, textarea{
width: 100%;
padding: .8em;
margin-bottom: 1em;
border-radius: .3em;
border: 1px solid gray;
box-sizing: border-box;
}
input[type="submit"]{
background-color: var(--primary-color);
color: white;
font-weight: bold;
font-size: 1.3em;
border: none;
margin-bottom: 5em;
border-radius: 5em;
display: inline-block;
padding: .8em 6.7em;
width: unset;
cursor: pointer;
}
iframe{
width: 100%;
height: 300px;
}
nav.mobile-menu{
display: block;
}
nav{
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top: 0;
background: #20272e;
height: 100vh;
padding: 1em;
ul.primary-nav{
margin-top: 5em;
}
li{
a{
color:white;
text-decoration: none;
display: block;
padding: .5em;
font-size: 1.3em;
text-align: right;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-mobile-closed {
float: right;
margin: .5em;
cursor: pointer;
}
//now here we desinging the pc version of the website
#media only screen and (min-width: 768px){
.mobile-menu, .mobile-menu-closed{
display: none;
}
.navbar .container{
display: grid;
grid-template-columns: 180px auto;
justify-content: unset;
}
.navbar nav{
display: flex;
justify-content: space-between;
background: none;
position: unset;
height: auto;
width: 100%;
padding: 0;
ul{
display: flex;
}
a{
color: black;
font-size: 1em;
padding: .1em 1em;
}
ul.primary-nav{
margin: 0;
}
li.current a{
font-weight: bold;
}
li.go-premium-cta a{
color: var(--primary-color);
border: 3px solid var(--primary-color);
font-weight: bold;
border-radius: 5em;
margin-top: -.2em;
&:hover{
background: var(--primary-color);
color: white;
}
}
}
}
#media only screen and (min-width: 950px) {
.container{
width: 950px;
margin: 0 auto;
}
section{
padding: 10em 4em;
}
.hero .container{
display: flex;
justify-content: space-between;
text-align: left;
.left-col{
margin: 3em 3em 0 5em;
h1 {
font-size: 3em;
width: 90%;
}
}
}
.hero-img{
width: 30%;
margin-right: 8em;
}
.hero-cta{
display: flex;
}
.primary-cta{
margin-right: 1em;
}
ul.features-list{
display: block;
margin-left: 5em;
li{
font-size: 1.4em;
&:before{
width: 30px;
height: 30px;
}
}
}
.features-section{
position: relative;
}
.features-section img{
display:block;
position: absolute;
right: 0;
width: 325px;
bottom: -6em;
height: 250px;
}
.testimonials-section ul{
display: flex;
li {
margin: 0 1em;
flex-basis: 33.333333%;
}
}
.contact-section{
position: relative;
display: flex;
}
.contact-right{
position: absolute;
right: 0;
top: 0;
width: 45%;
height: 100%;
iframe{
height: 100%;
}
}
}
//here we done the styling of 1220px and after
#media only screen and (min-width: 1220px){
.features-section{
&:before{
content: '';
position: absolute;
width: 10%;
height: 20em;
background: var(--primary-color);
left: 0;
top: -4em;
}
&:after{
content: '';
position: absolute;
width: 200px;
height: 18em;
background: url('../2021frontend/images/dots.svg') no-repeat;
top: -1em;
left: auto;
}
}
}
<div class="navbar"> <!-- here class is the name given to the div block so that the css identify it for styling it-->
<div class="container">
<a class="logo" href="#">Let's<span>Code</span></a>
<img id="mobile-cta" class="mobile-menu" src="2021frontend/images/menu.svg" alt="Open navigation">
<nav>
<img id="mobile-sta" class="mobile-menu-closed" src="2021frontend/images/exit.svg" alt="Closed navigation">
<ul class="primary-nav">
<li class="home">Home</li>
<li>Events</li>
<li>Registration</li>
</ul>
<ul class="secondary-nav">
<li>GrowYourMoney</li>
<li>Projects</li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="left-col">
<p class="subhead">Share with the World & Grow with the World</p>
<h1>We are here to make the Future</h1>
<div class="hero-cta">
Click Here
<a href="#" class="watch-video-cta">
<img src="2021frontend/images/watch.svg" alt="Watch a video">Watch a Video
</a>
</div>
</div>
<img src="2021frontend/images/illustration.svg" class="hero-img" alt="illustration-images">
</div>
</section>
<section class="features-section">
<div class="container">
<ul class="feature-list">
<li>Full Stack Web Development</li>
<li>Full Stack Mobile App Development</li>
<li>Cloud tech</li>
<li>Devops</li>
<li>Web3 Development</li>
<li>Stock Market</li>
</ul>
<img src="2021frontend/images/holding-phone.jpg" alt="Man holding phone">
</div>
</section>
<section class="testimonials-section">
<div class="container">
<ul>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"has a strong hold in full stack web Development, leader of team antidote in sih prefinal round"</blockquote>
<cite>- saksham bansal</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"starting my journey as a full stack developer and interested in web3 domain"</blockquote>
<cite>- sayan halder</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently doing frontend development with bootstrap and loves playing football and cricket"</blockquote>
<cite>- varun sharma</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"currently learning web Development and see myself in future as a android developer "</blockquote>
<cite>- parth barara</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the tomper of the class and likes chemistry very much"</blockquote>
<cite>- sakshi gupta</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"i dont know what i am doing but my boyfriend loves me very much"</blockquote>
<cite>- nandini gulati</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"same as nandini"</blockquote>
<cite>- kushi suri</cite>
</li>
<li>
<img src="2021frontend/images/person.jpg" alt="person">
<blockquote>"iam the don of kv, dont even try to fight with me in palam"</blockquote>
<cite>- sribash paul</cite>
</li>
</ul>
</div>
</section>
<br>
<section class="contact-section">
<div class="contact-left">
<h2>Contact</h2>
<form action="">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your Name"> <br>
<br>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="#email.com"> <br>
<br>
<label for="message">Message</label> <br>
<textarea name="message" id="message" cols="30" rows="10"></textarea> <br>
<br>
<input type="submit" class="send-message-cta" value="Send Message">
</form>
</div>
<div>
<div class="contact-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28026.467037845872!2d77.08443149999997!3d28.59052415000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1b3f9902dce7%3A0xdf51d27e693abbea!2sPalam%2C%20New%20Delhi%2C%20Delhi!5e0!3m2!1sen!2sin!4v1649777392215!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
<img src="2021frontend/images/" alt="">
</section>


By default display: flex; will try and put everything onto one row. Where you have .testimonials-section ul { in your 950px breakpoint add flex-wrap: wrap;
One thing to note, and I may be mistaken here, is that flex-basis doesn't take margins into consideration, so you will find that your testimonials will be 2 per row instead of 3 because of the horizontal margins you've set. You can fix this by change flex-basis: 33.3333% to flex-basis: calc(33.3333% - 2em);

Related

Change header and content based off the tab selected

I have a menu bar that changes the tab based on which one is selected. Right now both of the headers aren't displaying properly with each of the tabs and I was wondering how I can fix this?
When I move the content-header div into the content div with the associated tab, the styling gets messed up, but when I take it out and leave it where it's at, the header gets duplicated to the other tabs. I have provided a screenshot of what I'm trying to achieve and the code as well.
(How I want to display each tab: Each will have their own header that's specific to the tab selected)
function switchTabs() {
document.querySelectorAll(".tab-button").forEach(link => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`[data-tab="${tabNumber}"]`)
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tab-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add("tab-button-active");
tabToActivate.classList.add("content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click()
})
});
#import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
body {
line-height: 1.5;
min-height: 100vh;
font-family: "Be Vietnam Pro", sans-serif;
background-color: #E5E5E5 !important;
color: var(--c-text-primary);
}
:focus {
outline: 0;
}
.navbar-light {
background-color: #ffffff;
}
.navbar-nav{
justify-content: space-between;
}
.navbar-brand {
font-size: 45px;
color: #A388E7 !important;
font-weight: bolder;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
text-decoration: none;
white-space: nowrap;
}
.nav-item{
color: #686868 !important;
font-size: 20px;
position: relative;
right: -1675px !important;
}
.nav-item a {
display: block;
padding: 0.5rem 1rem;
color: #000000;
text-decoration: none;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
#alert{
position: relative;
right: -3px !important;
}
.action {
position: fixed;
top: 20px;
right: 30px;
}
.action .profile {
position: relative;
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
cursor: pointer;
}
.action .profile img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.action .menu {
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #fff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
border-radius: 15px;
transition: 0.5s;
visibility: hidden;
opacity: 0;
}
.action .menu.active {
top: 80px;
visibility: visible;
opacity: 1;
}
.action .menu::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
*, ::after, ::before {
box-sizing: border-box;
}
.action .menu h3 {
width: 100%;
text-align: center;
font-size: 18px;
padding: 20px 0;
font-weight: 500;
color: #555;
line-height: 1.5em;
}
.action .menu h3 span {
font-size: 14px;
color: #cecece;
font-weight: 300;
}
.action .menu ul li {
list-style: none;
padding: 16px 0;
border-top: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
}
.action .menu ul li img {
max-width: 20px;
margin-right: 10px;
opacity: 0.5;
transition: 0.5s;
}
.action .menu ul li:hover img {
opacity: 1;
}
.action .menu ul li a {
display: inline-block;
text-decoration: none;
color: #555;
font-weight: 500;
transition: 0.5s;
}
.action .menu ul li:hover a {
color: #9370DB;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.button {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em;
height: 40px;
border-radius: 8px;
line-height: 1;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
background-color: var(--c-background-primary);
}
.button i {
margin-right: 0.5rem;
font-size: 1.25em;
}
.button span {
font-weight: 500;
}
.button:hover, .button:focus {
border-color: var(--c-accent-primary);
color: var(--c-accent-primary);
}
.main {
padding-top: 3rem;
}
.main-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.main-header h1 {
font-size: 1.75rem;
font-weight: 600;
line-height: 1.25;
}
#media (max-width: 550px) {
.main-header h1 {
margin-bottom: 1rem;
}
}
.search {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 340px;
}
.search input {
font: inherit;
color: inherit;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 1em 0 36px;
height: 40px;
border-radius: 8px;
border: 2px solid var(--c-border-primary);
color: var(--c-text-action);
font-size: 0.875rem;
transition: 0.15s ease;
width: 100%;
line-height: 1;
}
.search input::-moz-placeholder {
color: var(--c-text-action);
}
.search input:-ms-input-placeholder {
color: var(--c-text-action);
}
.search input::placeholder {
color: var(--c-text-action);
}
.search input:focus, .search input:hover {
border-color: var(--c-accent-primary);
}
.search button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background-color: transparent;
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 1.25em;
color: var(--c-text-action);
padding: 0;
height: 40px;
}
.horizontal-tabs {
margin-top: 1.5rem;
display: flex;
align-items: center;
overflow-x: auto;
}
#media (max-width: 1000px) {
.horizontal-tabs {
scrollbar-width: none;
position: relative;
}
.horizontal-tabs::-webkit-scrollbar {
display: none;
}
}
.horizontal-tabs a {
display: inline-flex;
flex-shrink: 0;
align-items: center;
height: 48px;
padding: 0 0.25rem;
font-weight: 500;
color: inherit;
border-bottom: 3px solid transparent;
text-decoration: none;
transition: 0.15s ease;
}
.horizontal-tabs a:hover, .horizontal-tabs a:focus, .horizontal-tabs a.active {
color: var(--c-accent-primary);
border-bottom-color: var(--c-accent-primary);
}
.horizontal-tabs a + * {
margin-left: 1rem;
}
.content-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 3rem;
margin-top: -1px;
border-top: 1px solid var(--c-border-primary);
}
.content-header-intro h2 {
font-size: 1.25rem;
font-weight: 600;
}
.content-header-intro p {
color: var(--c-text-secondary);
margin-top: 0.25rem;
font-size: 0.875rem;
margin-bottom: 1rem;
}
#media (min-width: 800px) {
.content-header-actions a:first-child {
display: none;
}
}
.content {
border-top: 1px solid var(--c-border-primary);
margin-top: 2rem;
display: none;
}
.content-active {
display: flex !important;
}
.content-panel {
display: none;
max-width: 280px;
width: 25%;
padding: 2rem 1rem 2rem 0;
margin-right: 3rem;
}
#media (min-width: 800px) {
.content-panel {
display: block;
}
}
.vertical-tabs {
display: flex;
flex-direction: column;
}
.vertical-tabs a {
display: flex;
align-items: center;
padding: 0.75em 1em;
background-color: transparent;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
color: var(--c-text-action);
transition: 0.15s ease;
}
.vertical-tabs a:hover, .vertical-tabs a:focus, .vertical-tabs a.active {
background-color: var(--c-background-tertiary);
color: var(--c-accent-primary);
}
.vertical-tabs a + * {
margin-top: 0.25rem;
}
.content-main {
padding-top: 2rem;
padding-bottom: 6rem;
flex-grow: 1;
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
row-gap: 1.5rem;
}
#media (min-width: 600px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
background-color: var(--c-background-primary);
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 1.5rem 1.25rem 1rem 1.25rem;
}
.card-header div {
display: flex;
align-items: center;
}
.card-header div span {
width: 40px;
height: 40px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.card-header div span img {
max-height: 100%;
}
.card-header div h3 {
margin-left: 0.75rem;
font-weight: 500;
}
.toggle span {
display: block;
width: 40px;
height: 24px;
border-radius: 99em;
background-color: var(--c-background-quaternary);
box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.05);
position: relative;
transition: 0.15s ease;
}
.toggle span:before {
content: "";
display: block;
position: absolute;
left: 3px;
top: 3px;
height: 18px;
width: 18px;
background-color: var(--c-background-primary);
border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
transition: 0.15s ease;
}
.toggle input {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle input:checked + span {
background-color: var(--c-accent-primary);
}
.toggle input:checked + span:before {
transform: translateX(calc(100% - 2px));
}
.toggle input:focus + span {
box-shadow: 0 0 0 4px var(--c-background-tertiary);
}
.card-body {
padding: 1rem 1.25rem;
font-size: 0.875rem;
}
.card-footer {
margin-top: auto;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid rgba(0,0,0,.125);
}
.card-footer a {
color: var(--c-text-action);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tab-button-active{
color: var(--c-accent-primary) !important;
border-bottom: 3px solid var(--c-accent-primary) !important;
}
html::-webkit-scrollbar {
width: 12px;
}
html::-webkit-scrollbar-thumb {
background-color: var(--c-text-primary);
border: 4px solid var(--c-background-primary);
border-radius: 99em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StudioPick</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="CSS/settings.css">
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType"
style="position: relative; top: -20px; right: -60px; font-size: 12px !important">Studio</p>
<ul>
<li>
<img src="./assets/icons/user.png" />Dashboard
</li>
<li>
<img src="./assets/icons/edit.png" />Edit profile
</li>
<li>
<img src="./assets/icons/envelope.png" />Inbox
</li>
<li>
<img src="./assets/icons/settings.png" />Setting
</li>
<li><img src="./assets/icons/question.png" />Help</li>
<li>
<img src="./assets/icons/log-out.png" />Logout
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<main class="main">
<div class="responsive-wrapper">
<div class="main-header">
<h1>Settings</h1>
<div class="search">
<input type="text" placeholder="Search" />
<button type="submit">
<i class="ph-magnifying-glass-bold"></i>
</button>
</div>
</div>
<div class="horizontal-tabs">
<a class="tab-button" href="#" data-for-tab="1">Profile</a>
<a class="tab-button" href="#" data-for-tab="2">My Rooms</a>
<a class="tab-button" href="#" data-for-tab="3">Session Management</a>
<a class="tab-button" href="#" data-for-tab="4">Payment History</a>
<a class="tab-button" href="#" data-for-tab="5">Edit Payment</a>
</div>
<div class="content" data-tab="1">
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your profile</h2>
<p>Edit your profile information such email, username, password, etc.</p>
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
<div class="content-header">
<div class="content-header-intro">
<h2>Manage your studio rooms</h2>
<p>Add, delete, and edit the room images for your studio profile.</p>
</div>
<div class="content-header-actions">
<a href="#" class="button">
<i class="ph-faders-bold"></i>
<span>Filters</span>
</a>
<a href="#" class="button">
<i class="ph-plus-bold"></i>
<span>Add a room</span>
</a>
</div>
</div>
<div class="content" data-tab="2">
<div class="content-panel">
<div class="vertical-tabs">
View Rooms
Manage Services
</div>
</div>
<div class="content-main">
<div class="card-grid">
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/zeplin.svg" /></span>
<h3>Room A</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/github.svg" /></span>
<h3>Room B</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
<article class="card">
<div class="card-header">
<div>
<span><img src="https://assets.codepen.io/285131/figma.svg" /></span>
<h3>Room C</h3>
</div>
<label class="toggle">
<input type="checkbox" checked>
<span></span>
</label>
</div>
<div class="card-body">
<p>Add room's content</p>
</div>
<div class="card-footer">
View integration
</div>
</article>
</div>
</div>
</div>
<div class="content" data-tab="3">
<div class="content-panel">
<div class="vertical-tabs">
</div>
</div>
<div class="content-main">
<div class="card-grid">
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://unpkg.com/phosphor-icons'></script>
<script src="Javascript/settings.js"></script>
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>

There are a few things you need to do.
Add a wrapper to content-panel and content main with these styles:
width: 100%;
display: flex;
flex-direction: row;
Move your content-headers inside the content class
Finally provide a width of 100% to content-headers
And here is the working example:
https://codepen.io/saadramay/pen/NWMgxrB

Date input and sidebar showing incorrectly (working well on chrome devtools)

I have a problem where my page looks weird. The photo should be displayed on the right and the input (date) doesntwork on mobile. Page is hosted on github pages and netlify. Problem is the same on both pages, but it is working correctly on chrome DevTools and on screens wider than 1200px. Any suggestions how to fix that behaviour?
link to the page: https://fabianswiczerewski-dashboard.netlify.app/
const sideMenu = document.querySelector('aside');
const menuBtn = document.querySelector('#menu-btn');
const closeBtn = document.querySelector('#close-btn');
const themeToggler = document.querySelector('.theme-toggler');
menuBtn.addEventListener('click', () => {
sideMenu.style.display = 'block';
} );
closeBtn.addEventListener('click', () => {
sideMenu.style.display = 'none';
} );
themeToggler.addEventListener('click', () => {
document.body.classList.toggle('dark-theme-variables');
themeToggler.querySelector('span:nth-child(1)').classList.toggle('active');
themeToggler.querySelector('span:nth-child(2)').classList.toggle('active');
} );
// fill ORDERS
Orders.forEach(order =>{
const tr = document.createElement('tr');
const trContent = `
<td>${order.productName}</td>
<td>${order.productNumber}</td>
<td>${order.paymentStatus}</td>
<td class="${order.shipping === 'Declined' ? 'danger' : order.shipping === 'Pending' ? 'warning' : 'primary'}">${order.shipping}</td>
<td class="primary">Details</td>
`
tr.innerHTML = trContent;
document.querySelector('table tbody').appendChild(tr);
})
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700;800&display=swap');
:root{
--color-primary: #7380ec;
--color-danger: #ff7782;
--color-succes: #41f1b6;
--color-warning: #ffbb55;
--color-white: #fff;
--color-info-dark: #7d8da1;
--color-info-light: #dce1eb;
--color-dark: #363949;
--color-light: rgba(132, 139, 200, 0.18);
--color-primary-variant: #111e88;
--color-dark-variant: #677483;
--color-background: #f6f6f9;
--card-border-radius: 2rem;
--border-radius-1: 0.4rem;
--border-radius-2: 0.8rem;
--border-radius-3: 1.2rem;
--card-padding: 1.8rem;
--padding-1: 1.2rem;
--box-shadow: 0 2rem 3rem var(--color-light);
}
/* dark theme */
.dark-theme-variables{
--color-background: #181a1e;
--color-white: #202528;
--color-dark: #edeffd;
--color-dark-variant: #a3bdcc;
--color-light: rgba(0, 0, 0, 0.4);
--box-shadow: 0 2rem 3rem var(--color-light);
}
*{
margin: 0;
padding: 0;
outline: 0;
appearance: none;
border: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
html{
font-size: 14px;
}
body{
width: 100vw;
height: 100vh;
font-family: 'Poppins', sans-serif;
background: var(--color-background);
user-select: none;
overflow-x: hidden;
color: var(--color-dark);
}
.container{
display:grid;
width: 96%;
margin: 0 auto;
gap: 1.8rem;
grid-template-columns: 14rem auto 23rem;
}
a{
color: var(--color-dark);
}
img{
display: block;
width: 100%;
}
h1{
font-weight: 800;
font-size: 1.8rem;
}
h2{
font-size: 1.4rem;
}
h3{
font-size: 0.87rem;
}
h4{
font-size: 0.8rem;
}
h5{
font-size: 0.77rem;
}
small{
font-size: 0.75rem;
}
.profile-photo{
width: 2.8rem;
height: 2.8rem;
border-radius: 50%;
overflow: hidden;
}
.text-muted{
color: var(--color-info-dark);
}
p{
color: var(--color-dark-variant);
}
b{
color: var(--color-dark);
}
.primary{
color: var(--color-primary);
}
.danger{
color: var(--color-danger);
}
.warning{
color: var(--color-warning);
}
.succes{
color: var(--color-succes);
}
aside{
height: 100vh;
}
aside .top{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.4rem;
}
aside .logo{
display: flex;
gap: 0.8rem;
margin-left: 1.8rem;
}
aside .logo img{
width: 2rem;
height: 2rem;
}
aside .close{
display: none;
}
/* sidebar */
aside .sidebar{
display: flex;
flex-direction: column;
height: 86vh;
position: relative;
top: 3rem;
}
aside h3{
font-weight: 500;
}
aside .sidebar a{
display: flex;
color: var(--color-info-dark);
margin-left: 2rem;
gap: 1rem;
align-items: center;
position: relative;
height: 3.7rem;
transition: all 300ms ease;
}
aside .sidebar a span{
font-size: 1.6rem;
transition: all 300ms ease;
}
aside .sidebar a:last-child{
position: absolute;
bottom: 2rem;
width: 100%;
}
aside .sidebar a.active{
background: var(--color-light);
color: var(--color-primary);
margin-left: 0;
}
aside .sidebar .active:before{
content: "";
width: 6px;
height: 100%;
background: var(--color-primary);
}
aside .sidebar a.active span{
color: var(--color-primary);
margin-left: calc(1rem - 3px);
}
aside .sidebar a:hover{
color: var(--color-primary);
}
aside .sidebar a:hover span{
margin-left: 1rem;
}
aside .sidebar .message-count{
background: var(--color-danger);
color: var(--color-white);
padding: 2px 10px;
font-size: 11px;
border-radius: var(--border-radius-1);
}
/* main */
main{
margin-top:1.4rem;
}
main .date{
display: inline-block;
background: var(--color-light);
border-radius: var(--border-radius-1);
margin-top: 1rem;
padding: 0.5rem 1.6rem;
}
main .date input[type='date']{
background: transparent;
color: var(--color-dark);
}
main .insights{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.6rem;
}
main .insights > div{
background: var(--color-white);
padding: var(--card-padding);
border-radius: var(--card-border-radius);
margin-top: 1rem;
box-shadow: var(--box-shadow);
transition: all 300ms ease;
}
main .insights > div:hover{
box-shadow: none;
}
main .insights >div span{
background: coral;
padding: 0.5rem;
border-radius: 50%;
color: var(--color-white);
font-size: 2rem;
}
main .insights > div.expenses span{
background: var(--color-danger);
}
main .insights > div.income span{
background: var(--color-succes);
}
main .insights > div .middle{
display: flex;
align-items: center;
justify-content: space-between;
}
main .insights h3{
margin: 1rem 0 0.6rem;
font-size: 1rem;
}
main .insights .progress{
position: relative;
width: 92px;
height: 92px;
border-radius: 50%;
}
main .insights svg{
width: 7rem;
height: 7rem;
}
main .insights svg circle{
fill:none;
stroke: var(--color-primary);
stroke-width: 14;
stroke-linecap: round;
transform: translate(5px, 5px);
}
main .insights .sales svg circle{
stroke-dasharray: 200;
stroke-dashoffset: -47;
}
main .insights .expenses svg circle{
stroke-dasharray: 90;
stroke-dashoffset: 20;
}
main .insights .income svg circle{
stroke-dasharray: 110;
stroke-dashoffset: 35;
}
main .insights .progress .number{
position: absolute;
top: 0;
left:0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
main .insights small{
margin-top: 1.3rem;
display: block;
}
/* recent orders */
main .recent-orders{
margin-top: 2rem;
}
main .recent-orders h2{
margin-bottom: 0.8rem;
}
main .recent-orders table{
background: var(--color-white);
width: 100%;
border-radius: var(--card-border-radius);
padding: var(--card-padding);
text-align: center;
box-shadow: var(--box-shadow);
transition: all 300ms ease;
}
main .recent-orders table:hover{
box-shadow:none;
}
main table tbody td{
height: 2.8rem;
border-bottom: 1px solid var(--color-light);
color:var(--color-dark-variant);
}
main table tbody tr:last-child td{
border:none;
}
main .recent-orders a{
text-align: center;
display: block;
margin: 1rem auto;
color: var(--color-primary);
}
/* right section */
.right{
margin-top: 1.4rem;
}
.right .top{
display: flex;
justify-content: end;
gap: 2rem;
}
.right .top button{
display: none;
}
.right .theme-toggler{
background: var(--color-light);
display: flex;
justify-content: space-between;
align-items: center;
height: 1.6rem;
width: 4.2rem;
cursor: pointer;
border-radius: var(--border-radius-1);
}
.right .theme-toggler span{
font-size:1.2rem;
width: 50%;
height: 100%;
display:flex;
align-items: center;
justify-content: center;
}
.right .theme-toggler span.active{
background: var(--color-primary);
color: white;
border-radius: var(--border-radius-1);
}
.right .top .profile{
display: flex;
gap:2rem;
text-align: right;
}
/* recent updates */
.right .recent-updates{
margin-top:1rem;
}
.right .recent-updates h2{
margin-bottom: 0.8rem;
}
.right .recent-updates .updates{
background: var(--color-white);
padding: var(--card-padding);
border-radius: var(--card-border-radius);
box-shadow: var(--box-shadow);
transition: all 300ms ease;
}
.right .recent-updates .updates:hover{
box-shadow: none;
}
.right .recent-updates .updates .update{
display: grid;
grid-template-columns: 2.6rem auto;
gap: 1rem;
margin-bottom: 1rem;
}
/* sales analytics */
.right .sales-analytics{
margin-top:2rem;
}
.right .sales-analytics h2{
margin-bottom: 0.8rem;
}
.right .sales-analytics .item{
background: var(--color-white);
display: flex;
align-items: center;
gap:1rem;
margin-bottom: 0.7rem;
padding: 1.4rem var(--card-padding);
border-radius: var(--border-radius-3);
box-shadow: var(--box-shadow);
transition: all 300ms ease;
}
.right .sales-analytics .item:hover{
box-shadow: none;
}
.right .sales-analytics .item .right{
display: flex;
justify-content: space-between;
align-items: stretch;
margin: 0;
width: 100%;
}
.right .sales-analytics .item .icon{
padding: 0.6rem;
color: var(--color-white);
border-radius:50%;
background: var(--color-primary);
display: flex;
}
.right .sales-analytics .item.offline .icon{
background: var(--color-danger);
}
.right .sales-analytics .item.customers .icon{
background: var(--color-succes);
}
.right .sales-analytics .add-product{
background-color: transparent;
border: 2px dashed var(--color-primary);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
}
.right .sales-analytics .add-product div{
display: flex;
align-items: center;
gap:0.6rem;
}
.right .sales-analytics .add-product:hover{
color: white;
background: var(--color-primary);
}
.right .sales-analytics .add-product div h3{
font-weight: 600;
}
/* Media Queries */
#media screen and (max-width:1200px){
.container{
width: 94%;
grid-template-columns: 7rem auto 23rem;
}
aside .logo h2{
display: none;
}
aside .sidebar h3{
display: none;
}
aside .sidebar a{
width: 5.6rem;
}
aside .sidebar a:last-child{
position: relative;
margin-top: 1.8rem;
}
main .insights{
grid-template-columns: 1fr;
gap:0;
}
main .recent-orders{
width: 94%;
position: absolute;
left:50%;
transform: translateX(-50%);
margin: 2rem 0 0 8.8rem;
}
main .recent-orders table{
width: 82vw;
}
main table thead tr th:last-child, main table thead tr th:first-child{
display: none;
}
main table tbody tr td:last-child, main table tbody tr td:first-child{
display: none;
}
}
/* mobile media query */
#media screen and (max-width: 768px){
.container{
width: 100%;
grid-template-columns: 1fr;
}
aside{
position: fixed;
left: -100%;
background: var(--color-white);
width: 18rem;
z-index: 3;
box-shadow: 1rem 3rem 4rem var(--color-light);
height: 100vh;
padding-right: var(--card-padding);
display:none;
animation: showMenu 400ms ease forwards;
}
aside .logo{
margin-left: 1rem;
}
aside .logo h2{
display: inline;
}
aside .logo h3{
display: inline;
}
aside .sidebar h3{
display: inline;
}
aside .sidebar a{
width: 100%;
height: 3.4rem;
}
aside .sidebar a:last-child{
position: absolute;
bottom: 5rem;
}
aside .close{
display: inline-block;
cursor: pointer;
}
main{
margin-top: 8rem;
padding: 0 1rem;
}
main .recent-orders{
position: relative;
margin: 3rem 0 0 0;
width: 100%;
}
main .recent-orders table{
width: 100%;
margin: 0;
}
.right{
width: 94%;
margin: 0 auto 4rem;
}
.right .top{
position: fixed;
top:0;
left: 0;
align-items: center;
padding: 0 0.8rem;
height: 4.6rem;
background: var(--color-white);
width: 100%;
margin: 0;
z-index: 2;
box-shadow: 0 1rem 1rem var(--color-light);
}
.right .top .theme-toggler{
width: 4.4rem;
position: absolute;
left: 66%;
}
.right .profile .info{
display: none;
}
.right .top button{
display: inline-block;
background: transparent;
cursor: pointer;
color: var(--color-dark);
position: absolute;
left: 1rem;
}
.right .top button span{
font-size: 2rem;
}
#keyframes showMenu{
to{
left:0;
}
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Dahshboard</title>
<!-- icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">
<!-- stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<aside>
<div class="top">
<div class="logo">
<img src="./images/code.png" alt="">
<h2>FAB<span class="primary">IAN</span></h2>
</div>
<div class="close" id="close-btn">
<span class="material-icons-sharp">close</span>
</div>
</div>
<div class="sidebar">
<a href="#" class='active'>
<span class="material-icons-sharp">grid_view</span>
<h3>Dashboard</h3>
</a>
<a href="#">
<span class="material-icons-sharp">person_outline</span>
<h3>Customers</h3>
</a>
<a href="#">
<span class="material-icons-sharp">receipt_long</span>
<h3>Orders</h3>
</a>
<a href="#">
<span class="material-icons-sharp">insights</span>
<h3>Analytics</h3>
</a>
<a href="#">
<span class="material-icons-sharp">mail_outline</span>
<h3>Messages</h3>
<span class='message-count'>17</span>
</a>
<a href="#">
<span class="material-icons-sharp">inventory</span>
<h3>Products</h3>
</a>
<a href="#">
<span class="material-icons-sharp">report_gmailerrorred</span>
<h3>Reports</h3>
</a>
<a href="#">
<span class="material-icons-sharp">settings</span>
<h3>Settings</h3>
</a>
<a href="#">
<span class="material-icons-sharp">add</span>
<h3>Add Product</h3>
</a>
<a href="#">
<span class="material-icons-sharp">logout</span>
<h3>Logout</h3>
</a>
</div>
</aside>
<!-- end of aside -->
<main>
<h1>Dashboard</h1>
<div class="date">
<input type="date" name="" value="">
</div>
<div class="insights">
<div class="sales">
<span class="material-icons-sharp">analytics</span>
<div class="middle">
<div class="left">
<h3>Total Sales</h3>
<h1>$78,876</h1>
</div>
<div class="progress">
<svg>
<circle cx='38' cy='38' r='36'> </circle>
</svg>
<div class="number">
<p>81%</p>
</div>
</div>
</div>
<small class='text-muted'>Last 24 hours</small>
</div>
<!-- end of sales -->
<div class="expenses">
<span class="material-icons-sharp">bar_chart</span>
<div class="middle">
<div class="left">
<h3>Total Expenses</h3>
<h1>$52,482</h1>
</div>
<div class="progress">
<svg>
<circle cx='38' cy='38' r='36'> </circle>
</svg>
<div class="number">
<p>62%</p>
</div>
</div>
</div>
<small class='text-muted'>Last 24 hours</small>
</div>
<!-- end of expenses -->
<div class="income">
<span class="material-icons-sharp">stacked_line_chart</span>
<div class="middle">
<div class="left">
<h3>Total Income</h3>
<h1>$26,394</h1>
</div>
<div class="progress">
<svg>
<circle cx='38' cy='38' r='36'> </circle>
</svg>
<div class="number">
<p>44%</p>
</div>
</div>
</div>
<small class='text-muted'>Last 24 hours</small>
</div>
<!-- end of income -->
</div>
<!-- end of insights -->
<div class="recent-orders">
<h2>Recent Orders</h2>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Product Number</th>
<th>Payment</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Show All
</div>
</main>
<!-- end of main -->
<div class="right">
<div class="top">
<button type="button" name="button" id='menu-btn'>
<span class="material-icons-sharp">menu</span>
</button>
<div class="theme-toggler">
<span class="material-icons-sharp active">light_mode</span>
<span class="material-icons-sharp">dark_mode</span>
</div>
<div class="profile">
<div class="info">
<p>Hey, <b>Alex</b></p>
<small class="text-muted">Admin</small>
</div>
<div class="profile-photo">
<img src="images/profile-1.jpg" alt="">
</div>
</div>
</div>
<!-- end of top -->
<div class="recent-updates">
<h2>Recent Updates</h2>
<div class="updates">
<div class="update">
<div class="profile-photo">
<img src="images/profile-2.jpg" alt="">
</div>
<div class="message">
<p><b>Daniel McKenzie</b> received his order of DJI Pro 2 drone.</p>
<small class="text-muted">2 Minutes Ago</small>
</div>
</div>
<div class="update">
<div class="profile-photo">
<img src="images/profile-3.jpg" alt="">
</div>
<div class="message">
<p><b>Daniel McKenzie</b> declined her order of Foldable Mini drone.</p>
<small class="text-muted">2 Minutes Ago</small>
</div>
</div>
<div class="update">
<div class="profile-photo">
<img src="images/profile-4.jpg" alt="">
</div>
<div class="message">
<p><b>Daniel McKenzie</b> received his order of KS304 drone.</p>
<small class="text-muted">2 Minutes Ago</small>
</div>
</div>
</div>
</div>
<!-- end of recent updates -->
<div class="sales-analytics">
<h2>Sales Analytics</h2>
<div class="item online">
<div class="icon">
<span class="material-icons-sharp active">shopping_cart</span>
</div>
<div class="right">
<div class="info">
<h3>ONLINE ORDERS</h3>
<small class='text-muted'>Last 24 Hours</small>
</div>
<h5 class='succes'>+39%</h5>
<h3>3849</h3>
</div>
</div>
<div class="item offline">
<div class="icon">
<span class="material-icons-sharp active">local_mall</span>
</div>
<div class="right">
<div class="info">
<h3>OFFLINE ORDERS</h3>
<small class='text-muted'>Last 24 Hours</small>
</div>
<h5 class='danger'>-17%</h5>
<h3>1176</h3>
</div>
</div>
<div class="item customers">
<div class="icon">
<span class="material-icons-sharp active">person</span>
</div>
<div class="right">
<div class="info">
<h3>NEW CUSTOMERS</h3>
<small class='text-muted'>Last 24 Hours</small>
</div>
<h5 class='succes'>+25%</h5>
<h3>785</h3>
</div>
</div>
<div class="item add-product">
<div class="">
<span class="material-icons-sharp active">add</span>
<h3>Add Products</h3>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="orders.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

Moving a button in the navbar, best Practices?

I have shifted my CTA "subscribe" button in the navbar to the far right using margin. But I am wondering if there is a better way to write this code-wise?
Prior to using the margin, I couldn't get the button to move at all, it was originally located beside the other navbar link items.
I have attached the code I am using below.
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100%;
display: block
}
.header-logo img {
height:150px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
padding-top: 50px;
}
header nav ul li {
display: inline-flex;
float: left;
list-style: none;
padding: 0px 15px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
}
.sub {
margin: 0px 1300px;
float: right;
height: auto;
position: relative;
z-index: 1000;
}
ul li a:hover {
color: firebrick;
}
#media only screen and (min-width: 1000px){
header .header-logo {
float: left;
padding: 15px 15px;
height: 0px;
max-width: 220px;
display: table;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 50px;
}
header .sub {
display: block;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
line-height: 40px;
border: 2px solid #111;
float: right;
margin-right: 40px;
margin-top: 5px;
padding: 0 20px;
}
}
/*INDEX*/
.index-banner {
margin: 0 auto;
width: 100%;
height:calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: table;
}
.index-banner h1 {
font-family:'Karma', serif;
font-size: 60px;
font-weight: 100;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.footer {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
margin: 0px 330px;
padding: 15px;;
}
.hero-section {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
}
.hero-section {
font-family:'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
width: 1895px;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
#media only screen and (min-width: 1000px){
.wrapper {
width: 2000px;
margin:0 auto;
}
.index-banner {
height:500px;
}
.hero-paragraph {
width: 2000px;
margin:0 auto;
}
.hero-section {
width: 2000px;
margin:0 auto;
}
}
/* FOOTER*/
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
#media only screen and (min-width: 1000px){
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}
</head>
<body>
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>Milestonehackers Podcast & Newsletter</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>

You can achieve that by removing float from ul element and add display flex. Also, remove float and margin from .sub element. Then by adding margin-left: auto to .sub the element will move to the far right.
One more note: your hero-section and some other elements have a width of 2000px which is not ideal for many screens. You can add max-width: 100% so it fits the screen if it is bigger than the screen.
See this code:
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100%;
display: block
}
.header-logo img {
height:150px;
margin-top: 10px;
float: left;
margin-right: 5px;
}
header nav ul {
display: block;
margin: 0 auto;
width: 100%;
padding-top: 50px;
padding: 0;
}
header nav ul li {
display: inline-flex;
float: left;
list-style: none;
padding: 0px 15px;
}
header nav ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
}
.sub {
/* Add margin-left: auto */
margin-left: auto;
/* float: right;*/
height: auto;
position: relative;
z-index: 1000;
}
ul li a:hover {
color: firebrick;
}
#media only screen and (min-width: 1000px){
header .header-logo {
float: left;
padding: 15px 15px;
height: 0px;
max-width: 220px;
display: table;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 50px;
}
header .sub {
display: block;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-transform: uppercase;
line-height: 40px;
border: 2px solid #111;
float: right;
margin-right: 40px;
margin-top: 5px;
padding: 0 20px;
}
}
/*INDEX*/
.index-banner {
margin: 0 auto;
width: 100%;
height:calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: table;
}
.index-banner h1 {
font-family:'Karma', serif;
font-size: 60px;
font-weight: 100;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 2px 2px 8px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.footer {
font-family:'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
margin: 0px 330px;
padding: 15px;;
}
.hero-section {
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
}
.hero-section {
font-family:'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
width: 1895px;
font-family:'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
#media only screen and (min-width: 1000px){
.wrapper {
width: 2000px;
margin:0 auto;
}
.index-banner {
height:500px;
}
.hero-paragraph {
width: 2000px;
margin:0 auto;
}
.hero-section {
width: 2000px;
margin:0 auto;
}
}
/* FOOTER*/
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
#media only screen and (min-width: 1000px){
footer ul li a {
font-family:'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}
<body>
<header>
<div class="header-logo">
<img src="img/Milestonehackers.jpg" alt="Milestonehackers logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
<div class="sub">
<li>Subscribe</li>
</div>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>Milestonehackers Podcast & Newsletter</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li>Home</li>
<li>Podcast</li>
<li>Newsletter</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright © 2019; All Rights Reserved</p>
</footer>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-database.js"></script>
<script src="app.js"></script>
</div>

HTML/CSS text Alignment and div error

I am testing out some alignment issues i had in the past and trying to solve this.
I am trying to do two things Here.
What I want to do is move texts in green box aligned all the way to left so that its on the edge like 'SHOP BY' above. Yes Both of them.
Yes you can see from the color boxes, green boxes are not meeting exactly on the edge of its parent blue box. I tried everything. And i cannot find the solution.
Thanks in advance!
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.nav-whats-new:hover a.nav-level-1{
background: white;
color: black;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
/*li>a:hover {
background-color: white;
color:#000;
}*/
.nav-level-2 {
/* display: none; */
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: white;
text-align: left;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover{
display: block;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
background: lightgreen;
-webkit-box-flex: 0;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
font-size: 14px;
margin: 0 0 20px;
}
.main-nav .nav-links .nav-level-2 ul {
width: 100%;
margin: 0px;
padding: 0px;
background: blue;
display: block;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li {
margin-bottom: 12px;
}
.invisible{
display: none;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li a {
font-size: 13px;
line-height: 17px;
letter-spacing: .5px;
color: #000;
display: inline;
background: green;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new">
<a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
<ul>
<li class="invisible"></li>
<li >
This Week
</li>
<li >
This Month
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

Is this what you are looking for, I just changed li and li>a
li {
vertical-align: top;
padding-top: 8px;
display: inline-block; }
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px 0px; }

Is this what u want?
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.nav-whats-new:hover a.nav-level-1{
background: white;
color: black;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding-top: 7px !important; //here is the change
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0px; //here is the change
}
/*li>a:hover {
background-color: white;
color:#000;
}*/
.nav-level-2 {
/* display: none; */
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: white;
text-align: left;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover{
display: block;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
background: lightgreen;
-webkit-box-flex: 0;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
position: relative;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
font-size: 14px;
margin: 0 0 20px;
}
.main-nav .nav-links .nav-level-2 ul {
width: 100%;
margin: 0px;
padding: 0px;
background: blue;
display: block;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li {
margin-bottom: 12px;
}
.invisible{
display: none;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li a {
font-size: 13px;
line-height: 17px;
letter-spacing: .5px;
color: #000;
display: inline;
background: green;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new">
<a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
<ul>
<li class="invisible"></li>
<li >
Week
</li>
<li >
This Month
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>

How make to an Ul-LI menu flexible?

When we click the id item on this menu it cover some bottom menu items. Instead of that I want a flexible menu, which means the drop item do not cover any other.
#demo {
margin: 30px 0 50px 0;
font-family: sans-serif;
}
#demo .wrapper {
display: inline-block;
width: 180px;
height: 20px;
position: absolute;
}
#demo .parent {
height: 100%;
width: 100%;
display: block;
cursor: pointer;
height: 150%;
background: #023b3b;
color: white;
z-index: 2;
position: relative;
text-align: center;
}
#demo .parent:hover,
#demo .content:hover ~ .parent {
background: #122112;
}
#demo .content:hover ~ .parent {
z-index: 0;
}
#demo .content {
position: absolute;
top: 0;
display: block;
z-index: 1;
height: 0;
width: 180px;
padding-top: 30px;
}
#demo .wrapper:active .content {
height: 100px;
z-index: 3;
}
#demo .content:hover {
height: 123px;
z-index: 3;
}
#demo .content ul {
background: #339933;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#demo .content ul a {
text-decoration: none;
}
#demo .content li:hover {
background: #122112;
color: white;
}
#demo .content li {
list-style: none;
text-align: left;
color: white;
font-size: 14px;
line-height: 30px;
height: 30px;
padding-left: 10px;
}
<div id="demo">
<div class="wrapper">
<div class="parent">Dashboard</div>
</div><br> <br>
<div class="wrapper">
<div class="parent">Apps</div>
<div class="content">
<ul>
<li>Inbox</li>
<li>Condact</li>
<li>Calender</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Layouts</div>
<div class="content">
<ul>
<li>Header</li>
<li>Aside</li>
<li>Footer</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Widjet</div>
</div>
</div>

Check if this could help you. I have added input and label.
#first {
float:left;
width:15%;
color :bisque;
border-color: #023b3b;
border-style : solid;
height: 100%;
background-color :#023b3b;
}
#boa{
height: 5%;
width: 20%;
float: left;
}
.bob{
text-indent: 200%;
line-height: 210%;
font-size: 150%;
font-family: sans-serif;
color: white;
font-weight: bold;
}
.boc{
text-indent: 4%;
color : white;
font-size: 83%;
font-family: sans-serif;
font-weight: normal;
}
.bod{
color:white;
font-size: 100%;
font-family: sans-serif;
line-height: 200%;
list-style-type: none;
}
#demo {
margin: 30px 0 50px 0;
font-family: sans-serif;
}
#demo .wrapper {
display: inline-block;
width: 180px;
}
#demo .parent {
padding: 5px;
display: block;
cursor: pointer;
background: #023b3b;
color: white;
position: relative;
text-align: center;
}
#demo .parent:hover,
#demo .content:hover ~ .parent {
background: #122112;
}
#demo .content:hover ~ .parent {
z-index: 0;
}
#demo .content {
height: 0px;
transition: height 0.3s;
z-index: 1;
width: 180px;
}
#demo .wrapper input[type=radio] {
position: absolute;
opacity: 0
}
#demo .wrapper:hover input[type=radio]:checked + .content {
height: 120px;
}
#demo .content:hover {
height: 123px;
z-index: 3;
}
#demo .content ul {
background: #339933;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#demo .content ul a {
text-decoration: none;
}
#demo .content li:hover {
background: #122112;
color: white;
}
#demo .content li {
list-style: none;
text-align: left;
color: white;
font-size: 14px;
line-height: 30px;
height: 30px;
padding-left: 10px;
}
<div id="first" style="float:left; lngth:60%; ">
<p><img src="image1.jpg" id="boa"><span class="bob">First</span></p>
<p class="boc" >Main</p>
<div id="demo">
<div class="wrapper">
<div class="parent">Dashboard</div>
</div><br> <br>
<div class="wrapper">
<label for="apps" class="parent">Apps</label>
<input type="radio" name="menu" id="apps" />
<div class="content">
<ul>
<li>Inbox</li>
<li>Condact</li>
<li>Calender</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<label for="layouts" class="parent">Layouts</label>
<input type="radio" name="menu" id="layouts" />
<div class="content">
<ul>
<li>Header</li>
<li>Aside</li>
<li>Footer</li>
<li>Other</li>
</ul>
</div>
</div><br><br>
<div class="wrapper">
<div class="parent">Widjet</div>
</div>
</div>
<p class="boc">Componets</p>
<p class="boc">Help</p>
<p class="bod"> Documents</p>
</div>

You add code in jquery:
$("#demo").hide();
$(".boc").click(function(){
$("#demo").slideToggle();
});

Categories

Resources