White space on HTML with high width

October 18, 2022

Hello i dont understand why there is a white space within the container on the rights side, that apeears above like 750 witdh ive been fighting with it for a couple of hours . i am kinda new too….. thanks in advance.

ive tryied playing with flex etc… grow shrink and more flex options i am sure i a missing something.

const hemburger = document.querySelector(`#hemburger`);
const linksContainer = document.querySelector(`.nav__links__container`);
const mainContent = document.querySelector(`.main__content`);

const divHandller = () => {
    document.querySelector(`.after__content`).classList.toggle(`display`);
};

const hamburgerHandler = () => {
    linksContainer.classList.toggle(`nav__display__icons`);
};

function displayWindowSize() {
    // Get width and height of the window excluding scrollbars
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    if (w >= 600) {
        linksContainer.classList.remove(`nav__display__icons`);
    }
}

window.addEventListener("resize", displayWindowSize);
hemburger.addEventListener(`click`, hamburgerHandler);
mainContent.addEventListener(`click`, divHandller);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body {
    background-color: black;
    color: white;
    width: 100%;
    height: 100%;
}

html {
    font-size: 62.5%;
}

a {
    text-decoration: none;
    color: white;
}

.container {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    align-items: baseline;
}

.nav__logo__container {
    flex: 2;
    margin-left: 1rem;
    position: relative;
}

.nav__links__container {
    flex: 0.5 1 auto;
    transition: 1s all;
}

#nav__links {
    margin: 1rem;
}

#nav__logo {
    font-size: 1.5rem;
}
#hemburger {
    margin-right: 2rem;
    font-size: 1.5rem;
    display: none;
    color: white;
}

@media (max-width: 600px) {
    .nav__links__container {
        position: absolute;
        flex-direction: column;
        display: flex;
        left: -100%;
        z-index: 2;
    }
    #hemburger {
        display: block;
    }
    .main__content {
        flex-direction: column;
        justify-content: center;
    }
    .btn__container {
        align-self: center !important;
    }
    .main__content {
        height: 30vh;
    }
}

.nav__display__icons {
    position: absolute;
    flex-direction: column;
    display: flex;
    left: 0;
    margin-top: 3rem;
}

/* NAV STYLING END */

.main__content {
    width: 80%;
    height: 80vh;
    background-color: black;
    margin: 0 auto;
    border: rgba(255, 255, 255, 0.491) 1.5px solid;
    margin-top: 1.5rem;

    display: flex;
    align-items: center;
    border-radius: 10px;
    position: relative;
}

#main__content__text {
}

.after__content {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(130, 127, 127);
    top: -150%;
    transition: all 2s;
    border-radius: 10px;
}

.display {
    top: 0%;
}

#main__content__text {
    text-align: center;
    height: 20rem;
    width: 20rem;
    font-size: 2rem;
    line-height: 4rem;
}

.main__content__img__container {
    font-size: 1.5rem;
}

.btn__container {
    align-self: flex-end;
    margin-bottom: 2rem;
}

#btn {
    padding: 1rem 2rem;
    border-radius: 25px;
    animation-name: btnAnimation;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    position: relative;
}

#btn:hover {
}

@keyframes btnAnimation {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 0.9;
    }
}
@keyframes btnAfterAnimation {
    0% {
        opacity: 0.5;
        width: 4rem;
        color: black;
    }

    100% {
        opacity: 0;
        width: 100%;
        color: black;
    }
}

#btn::after {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgb(118, 116, 116);
    border-radius: 25px;
    opacity: 0;
    z-index: 1;
    transition: all 1s;
}

#btn:hover::after {
    animation-name: btnAfterAnimation;
    animation-duration: 2s;
}

<!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>Nav</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <nav>
        <div class="container">
            <div class="nav__logo__container">
                <a href="" id="nav__logo">Logo</a>
            </div>
            <div class="nav__links__container">
                <a href="" id="nav__links">Home</a>
                <a href="" id="nav__links">About</a>
                <a href="" id="nav__links">My project</a>
                <a href="" id="nav__links">Terms</a>
            </div>
            <div> <i id="hemburger" class="fa-solid fa-bars"></i>
            </div>
        </div>
    </nav>

    <section class="main__content">
        <div class="main__content__text__container">
            <h3 id="main__content__text">strategic design for brands and small business and for you</h3>
        </div>

        <div class="btn__container">
            <button id="btn">Click here for more info</button>
        </div>
        <div class="main__content__img__container">
            <h4>Test test test</h4>
        </div>
        <div class="after__content"></div>
    </section>



    <script src="https://kit.fontawesome.com/618bf7505f.js" crossorigin="anonymous"></script>
    <script src="app.js"></script>
</body>

</html>