I have this random white space appearing between these two flex elements, .mainpage & .sidebar.
If I change .sidebar to a "flex" element, the white space disappears.
I believe this is causing the strange gap between the elements as well? (Where the red ? is in the pic).
I can't seem to figure out how to get these two elements to line up side by side, but have the .sidebar be autonomous in its height and not dependent on the .mainpage element.
Thanks for any help.
[Whitespace, Firefox Webdev][1] [1]: https://i.stack.imgur.com/4Xz9a.png
/* Making the general page-layout tidier */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
/* Ensuring the page body/content is ontop of the Background */
body {
z-index: 100;
/*font-family: 'Jost', sans-serif;*/
font-family: 'Raleway', sans-serif;
font-size: 10px;
}
a, a:link, a:visited {
text-decoration: none;
color: transparent;
}
/* Navbar */
nav {
display: flex;
justify-content: space-between;
width: 100%;
}
/* LOGO */
nav img {
width: 25vmax;
height: auto;
margin: 1px;
}
/* Links in the upper-right */
.nav-items {
display: flex;
width: 20vmax;
height: 10vh;
background-image: url('wave.svg');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
border-radius: 0 0 0 40px;
border: solid black 2px;
justify-content: center;
list-style: none;
font-size: .70rem;
justify-content: center;
align-items: center;
box-shadow: 0px 5px 5px 0px black;
}
/* Upper-right Links */
.nav-items li {
display: flex;
width: 7vmax;
height: 2vmax;
color: white;
outline: transparent;
margin: 0 1vmax;
justify-content: center;
align-items: center;
transition: .5s;
background-color: rgba(255, 255, 255, 0.116);
}
/* Upper-right Link effects on hover */
.nav-items li:hover {
outline: solid white 2px;
color: rgb(0, 217, 255);
border-radius: 0 0 20px 20px;
}
.main_page {
display: inline-flex;
outline: brown solid;
width: 75%;
height: 100%;
overflow: hidden;
}
/* Background SVG Wave */
.main_page_bg {
position: absolute;
background-image: url('wave.svg');
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 50%;
top: 50%;
z-index: -1;
}
.main_page_content {
display: inline-flex;
justify-content: start;
flex-wrap: wrap;
flex: 3;
z-index: 2;
margin: 0;
}
/* Store Logos */
.icon1, .icon2, .icon3 {
display: flex;
padding: 50px;
outline: black solid;
z-index: 2;
margin: 0 20px;
}
.sidebar {
display: inline-flex;
flex-direction: column;
width: 20%;
border: orange solid 2px;
z-index: -2;
text-align: center;
top: 0;
margin: 0;
}
.sidebar_content {
display: block;
font-size: .75rem;
}
.submenu {
display: none;
}
/* MOBILE CONFIGURATION */
@media only screen and (max-width: 1020px) {
.nav-items {
width: 10vmax;
height: 8vmax;
background-size: unset;
}
.nav-items li {
display: none;
}
/* Mobile-Menu Button */
.hamburger {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: .5rem;
right: .75rem;
width: 30px;
height: 21px;
}
.bar {
width: 100%;
height: 3px;
background-color: black;
}
.main_page {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
.main_page_content {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.sidebar {
display: flex;
justify-content: center;
width: 100%;
}
}<!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">
<link href="rework.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Manjari&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4376dcc16d.js" crossorigin="anonymous"></script>
<script src="rework.js" defer></script>
<title>Phoneleader.it</title>
</head>
<body>
<div class="navbar">
<!-- Navbar + LOGO Area -->
<nav>
<img src="goodlogo.png"/>
<a href="#" class="hamburger"> <!-- This section creates the three bars that form the mobile-menu 'hamburger' button -->
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="nav-items"> <!-- These are the main-sitelinks -->
<a href="#" target="_blank"><li class="nav-link">Promozioni</li></a>
<a href="#" target="_blank"><li class="nav-link">Contatti</li></a>
</ul>
</nav>
</div>
<!-- Contents of the main landing page -->
<div class="main_page">
<div class="main_page_bg">
<!-- This is where the background SVG is placed via CSS -->
</div>
<div class="main_page_content">
<div class="icon1">
<h1>Store1</h1>
</div>
<div class="icon2">
<h1>Store2</h1>
</div>
<div class="icon3">
<h1>Store3</h1>
</div>
</div>
</div>
<!-- Sidebar to contain extra store services -->
<div class="sidebar">
<div class="sidebar_content">
<h1>Sidebar</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque, nisi in egestas feugiat, turpis elit consequat erat, in convallis lectus nisi et justo. Proin venenatis massa nec semper iaculis. Nam id urna nunc. Suspendisse in mattis dolor. Aliquam in justo et leo consequat lobortis. Nam viverra nisl quis purus fringilla, sed ultrices nisi eleifend. Morbi gravida pellentesque vehicula. Curabitur eros lectus, dictum sit amet pretium ut, varius quis erat. Nam id congue nisl.
</div>
</div>
<!-- Submenu that opens up for store info -->
<div class="submenu">
</div>
</body>
</html>