set postion relative and absolute affect other element css

set postion relative and absolute affect other element css - html

i tried to css this page original page. im having a problem with position. i set part 2 (each part is number in the image) position relative, part 3 position absolute and negative margin so it can be place on top of part 2. however, it affect part 4 and i dont know how to set the text below part 3 so it appear as the design
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "gt-ultra";
}
a {
text-decoration: none;
color: #000;
}
:root {
--blue: #2c2e53;
--orange: #bd945f;
--grey: #f3f3f3;
--grey_des: #acacac;
}
body {
background: var(--grey);
}
header {
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
font-family: "gt-md";
background: white;
font-weight: normal;
}
.list {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
margin-left: 424px;
text-transform: uppercase;
}
.list a:hover {
padding-bottom: 10px;
border-bottom: 5px solid var(--orange);
}
#banner {
position: relative;
}
#banner img {
width: 100%;
}
.content {
position: absolute;
top: 124px;
left: 370px;
}
.content .title {
color: var(--blue);
font-size: 46px;
text-transform: uppercase;
border: 1px solid #000;
margin-bottom: 0;
}
.content .name {
color: var(--orange);
font-size: 46px;
text-transform: uppercase;
border: 1px solid #000;
margin-bottom: 0;
padding-bottom: 0;
}
.content p {
border: 1px solid #000;
font-family: "gt-md";
margin-top: 24px;
margin-bottom: 0;
width: 562px;
}
.content button {
background: var(--orange);
color: white;
padding: 24px 34px;
border: none;
text-transform: uppercase;
margin-top: 24px;
}
.content button:hover {
cursor: pointer;
}
#catelog {
display: flex;
justify-content: center;
}
.box {
position: absolute;
margin-top: -64px;
/* width: 1286px; */
border: 1px solid #000;
background: white;
padding: 60px 120px;
display: flex;
flex-direction: column;
gap: 92px;
}
.row {
display: flex;
flex-wrap: wrap;
gap: 148px;
border: 1px solid black;
justify-content: center;
}
.item {
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.item a {
margin-top: 10px;
}
.item img {
border: 1px solid #000;
}
.row:last-child {
}
.col {
display: flex;
flex-direction: column;
gap: 94px;
border: 1px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Xưởng mộc giá tốt</title>
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn"
crossorigin="anonymous"
/>
<!-- fontawesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- font -->
<link rel="stylesheet" href="/cat_gd/page2/css/style.css" />
<!-- style css -->
<link rel="stylesheet" href="/cat_gd/page2/css/font.css" />
</head>
<body>
<header>
<img src="/cat_gd/page2/images/logo.png" alt="" />
<div class="list">
trang chủ
giới thiệu
sản phẩm
tin tức
đối tác
liên hệ
</div>
</header>
<!-- ./header -->
<section id="banner">
<img src="/cat_gd/page2/images/banner.png" alt="" />
<div class="content">
<h2 class="title">thế giới nội thất số 1 việt nam</h2>
<h2 class="name">hoàng hoan</h2>
<p>
Sứ mệnh của chúng tôi là kết hợp hài hòa giữa ý tưởng và mong muốn của
khách hàng, đem lại những phút giây thư giãn tuyệt vời bên gia đình và
những người thân yêu
</p>
<button>liên hệ ngay</button>
</div>
</section>
<!-- ./banner -->
<section id="catelog">
<div class="box">
<div class="row">
<div class="item">
<img
src="/cat_gd/page2/images/loai-sp/icon-phong-khach.png"
alt=""
/>
Phòng khách
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-ngu.png" alt="" />
Phòng ngủ
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-bep.png" alt="" />
Phòng bếp
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-phong-tam.png" alt="" />
Phòng tắm
</div>
</div>
<div class="row">
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-tre-em.png" alt="" />
Trẻ em
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-van-phong.png" alt="" />
Văn phòng
</div>
<div class="item">
<img src="/cat_gd/page2/images/loai-sp/icon-cau-thang.png" alt="" />
Cầu thang
</div>
<div class="item">
<img
src="/cat_gd/page2/images/loai-sp/icon-do-trang-tri.png"
alt=""
/>
Đồ trang trí
</div>
</div>
</div>
</section>
<!-- ./catalog -->
<section id="about-us">
<div class="title">
<h2>sản phẩm nổi bật</h2>
<div class="line"></div>
</div>
<div class="products">
<div class="product">
<img src="" alt="" />
<h3></h3>
<div>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
<span><i class="fa-solid fa-star"></i></span>
</div>
</div>
</div>
</section>
<!-- Thư viện js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.min.js"
integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2"
crossorigin="anonymous"
></script>
<!-- Code js -->
</body>
</html>

Don't need to set position absolute for this. Just try margin top in negative value

use position:relative and z-index to take section

Related

How do I fix this sidebar for mobile? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
My websites sidebar doesn't work on mobile. If you wanna see what i mean, go to Zinexium. I don't know what to do, im new to html. The code.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
:root {
--sidebar-width: 4.5em;
}
.sidebar {
background-color: #333;
position: fixed;
transition: width 0.2s ease;
}
.sidebar nav {
height: 100%;
}
.sidebar .sidebar__nav {
display: flex;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .sidebar__nav .sidebar__nav__link {
align-items: center;
color: #bbb;
display: flex;
padding-left: 20px;
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.sidebar .sidebar__nav .sidebar__nav__link:hover {
background-color: rgba(0, 0, 0, 0.15);
color: #80f;
}
.sidebar .sidebar__nav .sidebar__nav__text {
display: none;
margin-left: 10px;
margin-right: auto;
white-space: nowrap;
}
.sidebar .sidebar__nav i {
align-items: center;
display: flex;
justify-content: center;
}
#media (max-width: 572px) {
.sidebar {
bottom: 0;
width: 100%;
}
.sidebar .sidebar__nav {
justify-content: center;
}
.sidebar .sidebar__nav .sidebar__nav__link {
height: 100%;
padding: 0.75em;
}
.sidebar .sidebar__nav i {
font-size: 2rem;
}
}
#media (min-width: 572px) {
.sidebar {
height: 100vh;
left: 0;
width: var(--sidebar-width);
}
.sidebar:hover {
width: 14rem;
}
.sidebar .sidebar__nav {
flex-direction: column;
}
.sidebar .sidebar__nav .sidebar__nav__link {
padding: 1em;
}
.sidebar:hover .sidebar__nav .sidebar__nav__text {
display: inline;
}
.sidebar .sidebar__nav i {
font-size: 2.5rem;
}
}
#media (max-height: 434px) {
.sidebar {
overflow-y: scroll;
}
}
:root {
--sidebar-width: 4.5em;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto';
}
* {
outline: none;
box-sizing: border-box;
}
.main {
margin-left: auto;
margin-right: auto;
max-width: 992px;
padding: 2em 1.5em;
}
.main h2 {
font-size: 2em;
margin-top: 0px;
}
.main p {
color: #444;
font-size: 1.25em;
line-height: 2;
text-align: justify;
}
#media (min-width: 572px) {
.main {
margin-left: var(--sidebar-width);
}
}
#media (min-width: 992px) {
.main {
padding: 2.5em;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
p {
font-size: 34px;
}
.wrapper {
position: relative;
/* height: 200px; */
width: 80%;
margin: auto;
overflow: auto;
}
.main {
margin: auto;
}
.column {
float: left;
width: 33.3%;
margin: 4em;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
width: 400px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.card p {
font-size: 150%; /* changes font size inside of cards*/
}
.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}
.container {
padding: 0 16px;
}
.container::after,
.row::after {
content: '';
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.rainbow {
text-align: center;
text-decoration: underline;
font-size: 32px;
font-family: monospace;
letter-spacing: 5px;
}
.rainbow_text_animated {
background: linear-gradient(
to right,
#6666ff,
#0099ff,
#00ff00,
#ff3399,
#6666ff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow_animation 6s ease-in-out infinite;
background-size: 400% 100%;
}
#keyframes rainbow_animation {
0%,
100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
#rcorners1 {
border-radius: 25px;
background: #d3d3d3;
padding: 20px;
width: 300px;
height: 345px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
The snippet isn't the exact website, only the developers page. If you wanna see the actual page, go to "The code" i linked.
Thanks.
P.S. The snippet is missing some things, so go to the actual developers page if you wanna see it ig.

If by "doesn't work" you meant "is hiding under the content" ...the solution is to give it the z-index: 1 in your CSS:
.sidebar {
z-index: 1;
}
it will do the job.

Element collapses after setting navbar to position:fixed

I want my sidemenu to be fixed. But whenever I do it the content page crashes.
It's this class menu_left . When I remove position: fixed then all works fine. But i want it to be fixed. I just want the menu to stay in position so I can scroll down my content only.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
#app {
display: flex;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
overflow: scroll;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I undesrtand you meant to say the content "collapses" to the left (not crashes).
You could use a pusher placeholder element like so:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
position: fixed;
width: 100%;
box-sizing: border-box;
}
#app {
display: flex;
padding-top: 47px;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-pusher {
flex: 0 0 200px;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left-pusher">...</div>
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

boot strap overriding customized nav-bar

With out bootstrap the nav bar works perfectly fine, but when I activate bootstrap the nav bar gets buggy.
Here is how it should look:
Here is how it looks with bootstrap:
I think there is something that needs an !important added to it, but I'm not sure what so please can someone with experience tell me which one?
I tried inline-flex as well but still no hope
I tried !important with the width but still doesn't work
I tried height: 0%!important; and still nothing work
I need to use bootstrap to have the table with bootstrap design so removing bootstrap is no option.
ok so I'm not sure if there's another problem like this but can't seem to find an answer so here is my code:
html {
scroll-behavior: smooth;
}
#extra space {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: sticky;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo {
color: whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li {
list-style: none;
}
.burger div {
width: 25px;
height: 5px;
background-color: whitesmoke;
margin: 3px;
}
.burger {
display: none;
cursor: pointer;
}
.nav-links a {
color: whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px) {
.nav-links {
display: inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav {
position: fixed;
top: 0;
}
.nav-links {
font-size: 1px;
position: fixed;
right: 0px;
height: 92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {}
.burger {
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active {
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color: black;
}
#section2 {
background-image: url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script>
<!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile">
<img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" />
</div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
edit:
the answer is you need to do a bootstrap nav_bar
the good thing if you search in the answers bellow you find my accepted answer as a good navbar

The issue is with your structure as bootstrap have its own nav structure so you need to follow that.
I just change the nav with the bootstrap nav and added you links
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar-nav {
justify-content: space-around;
width: 100%;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position:sticky;
top:0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><div class="logo">
<h4>thomas<br> venutu</h4>
</div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">NextEvent</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Boooking</a>
</li>
</ul>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>

Try this
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
position:sticky;
top:0;
min-height: 12vh;
background-color: #0c0c0c;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header d-flex align-items-center container-fluid">
<div class="row align-items-center flex-grow-1">
<div class="col-auto">
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
</div>
<div class="col">
<nav>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</div>
</header>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>

How to make two columns layout HTML

I'm creating online shop.
I want to create two column layout.
On the left side will be the tab gallery. On the right side i want to display the options for purchase like size,quantity,color,button for buy and etc.
I'm using bootstrap.
I want to doing something like this:
online shop
This is my codepen: https://codepen.io/anon/pen/KYeWPj
I have this code:
/*google analytics js */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
position: relative;
}
img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #e8e8e8;
font-family: 'helvetive neue', sans-serif;
font-weight: 700;
}
.container {
width: 600px;
position: relative;
margin-top: 30px;
margin-left: 0px;
}
.thumbnails {
list-style: none;
font-size: 0;
margin-left: -2%;
}
.thumbnails li {
display: inline-block;
width: 23%;
margin-left: 2%;
text-align: center;
vertical-align: middle;
}
.thumbnails li:hover .item-hugger {
background: white;
}
.thumbnails li:hover .item-hugger .title {
color: #000;
}
.thumbnails input[name="select"] {
display: none;
}
.thumbnails .item-hugger {
position: relative;
height: 140px;
margin: 20px 0;
background: #f2f2f2;
transition: all 150ms ease-in-out;
}
.thumbnails label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
}
.thumbnails .title {
padding: 20px 0 0;
font-size: 18px;
color: #555;
transition: all 150ms linear;
}
.thumbnails .thumb-image {
height: 100px;
padding: 20px 0;
}
.thumbnails .content {
position: absolute;
bottom: 0;
left: 0;
width: 600px;
height: 500px;
padding: 50px;
opacity: 0;
transition: all 150ms linear;
display: flex;
flex-direction: column;
justify-content: center;
}
.thumbnails .content .title {
font-size: 60px;
font-weight: 400;
display: inline-block;
color: #555;
border-bottom: 6px solid #fe7701;
padding: 50px 10px 0;
text-transform: uppercase;
}
.thumbnails input[name="select"]:checked+.item-hugger {
height: 180px;
margin: 0;
background: white;
}
.thumbnails input[name="select"]:checked~.content {
opacity: 1;
}
.white-box {
background: white;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title style="margin-bottom: 10px;">Item</title>
</head>-->
<body>
<div class="container">
<h1 style="margin-top:40px; text-align:center">Item</h1>
<ul class="thumbnails">
<li>
<input type="radio" name="select" id="image1">
<div class="item-hugger">
<div class="title">Image 1</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=882" />
<label for="image1"></label>
</div>
<div class="content">
<div class="item-wrapper"> <img src="https://unsplash.it/1024/612?image=882" />
<div class="title">Image 1</div>
</div>
</div>
</li>
<li class="is-active">
<input type="radio" name="select" id="image2" checked>
<div class="item-hugger">
<div class="title">Image 2</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=782" />
<label for="image2"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=782" />
<div class="title">Image 2</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image3">
<div class="item-hugger">
<div class="title">Image 3</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=682" />
<label for="image3"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=682" />
<div class="title">Image 3</div>
</div>
</div>
</li>
<li>
<input type="radio" name="select" id="image4">
<div class="item-hugger">
<div class="title">Image 4</div>
<img class="thumb-image" src="https://unsplash.it/289/165?image=582" />
<label for="image4"></label>
</div>
<div class="content">
<div class="item-wrapper">
<img src="https://unsplash.it/1024/612?image=582" />
<div class="title">Image 4</div>
</div>
</div>
</li>
</ul>
<div class="white-box"></div>
</div>
</body>

A really easy way of doing this would be to use a table. It doesn't require any CSS, just a simple table that doesn't have a visible border.
The way you do this is putting a <tr> tag around the content you want to align by each other and a <table> tag surrounding the <tr> tags. It should look like this:
<table><tr>YOUR ELEMENTS</tr></table>.
Now, take each of your elements that you'd like to be aligned side-by-side and put them in their own <td> tags. This is what it should look like now:
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr></table>
This should fix your problem. If you, for whatever reason, see borders around your elements you can to <table style="border: none;"> instead of just saying <table>. Hope this helped!

Any ideas on how I can shrink the white spaces between navbar options?

I want to decrease the space between "pricing", "how it works" and "features", as you can see here
I also know I can do that with margin but I tried a lot of different ways and it just don't come to mind on how to do that, so, it'd great if you could give me a hand.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Product Page</title>
<style type="text/css">
body{
background: #eee;
font-family: 'Lato', sans-serif;
}
#header-img{
float: left;
width:18.5em;
margin:15px 32px 0px 5px;
}
.nav-link{
position: relative;
float:right;
padding: 24px 40px 15px 20px;
}
#hero{
margin-top: 90px;
text-align: center;
}
#header{
overflow: hidden;
}
#email{
max-width: 275px;
width: 100%;
box-sizing: border-box;
padding:5px;
}
#form{
text-align: -webkit-center;
display: flex;
flex-direction: column;
}
.btn{
margin-top:13px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 150px;
width: 100%;
height: 30px;
background-color: #f1c40f;
padding: 0 20px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px;
border-radius: 2px;
cursor: pointer;
}
.flex{
display:flex;
margin-top: 80px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
.desc{
display: flex;
flex-direction: column;
justify-content: unset;
height: 125px;
width: 80vw;
padding: 41px 0px 0px 0px;
text-align: start;
}
.eighttwo, p{
padding: 0;
margin: 0;
}
.divisor{
margin-top: -40px;
}
.container{
width:100%;
max-width: 1000px;
}
a{
text-decoration: none;
color: #000;
}
#nav-bar{
display: flex;
background: #eee;
flex-direction: row;
}
#media screen and (max-width: 410px) {
#nav-bar {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
margin-top: 30px;
padding: 0 50px;
}
}
</style>
</head>
<body>
<header id="header">
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
</header>
<div id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
</div>
<form id="form">
<input id="email" type="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="Get Started" class="btn">
<div class="container">
<section id="features">
<div class="flex two">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-battery-full"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>
<section id="how-it-works">
<iframe width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</section>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

If you use justify-content: space-between; for your flex container and margin-left: auto; on the first of your links, the links will be moved as far right as their size and padding allows - see below. (BTW: Erase the float: left - it has no effect for flex items)
#nav-bar {
display: flex;
background: #eee;
flex-direction: row;
justify-content: space-between;
}
.nav-link {
padding: 24px 40px 15px 20px;
}
.nav-link:first-of-type {
margin-left: auto;
}
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

set postion relative and absolute affect other element css - html

Don't need to set position absolute for this. Just try margin top in negative value

use position:relative and z-index to take section

Related

How do I fix this sidebar for mobile? [closed]

Element collapses after setting navbar to position:fixed

boot strap overriding customized nav-bar

How to make two columns layout HTML

Any ideas on how I can shrink the white spaces between navbar options?

Categories

Resources