HTML + CSS | Issue with main content not overlapping with nav bar

Question

I have a main content area, which I want to be centered in the page both vertically and horizontally.

I added a css nav bar, but now the page has scroll bars both vertically and horizontally, and the main div is no longer centered. It appears to be moved to the right and down by the nav bar. I'm trying to have the main sit centrally, and then the nav "overlay" everything else so it doesn't affect the main div's positioning.

I think it has something to do with z-index but changing those values doesn't seem to achieve anything. Could anyone direct me to a resource to learn about the right way to fix this?

Thank you.

(It's all pretty scrappy as I'm just beginning to learn!)

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')

let state = {}

function startGame() {
    state = {};
    showTextNode(1);
}

function showTextNode(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
    textElement.innerText = textNode.text;
    while(optionButtonsElement.firstChild) {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild);
    }

    document.getElementById('image').style.display = "block"
    textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none";

    textNode.options.forEach(option => {
        if(showOption(option)) {
            const button = document.createElement('button');
            button.innerText = option.text;
            button.classList.add('btn')
            button.addEventListener('click', () => selectOption(option));
            optionButtonsElement.appendChild(button);
        }
    })
}

function showOption(){
    return true;
}

function selectOption(option) {
    const nextTextNodeId = option.nextText;
    state = Object.assign(state, option.setState)
    showTextNode(nextTextNodeId)
}

const textNodes = [
    {
        id: 1,
        text: 'Case Study: BioPharma Expansion',
        options: [
            {
                text: 'Start',
                setState: {},
                nextText: 2
            }
        ]
    },
    {
        id: 2,
        text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
        options: [
            {
                text: "I'd like to know more about BioPharma's revenue",
                setState: {},
                nextText: 3
            },
            {
                text: "I'd like to know more about BioPharma's cost structure",
                setState: {},
                nextText: 3
            }   
        ]
    },
    {
        id: 3,
        text: "BioPharma's revenue has increased year on year by 12% since 2014",
        options: [
            {
                text: "What about costs?",
                setState: {},
                nextText: 4
            }
        ]
    },
    {
        id: 4,
        text: "BioPharma's cost structure is shown below in Figure 1",
        imageLink: "figure1a.png",
        options: [
            {
                text: "Here is some stuff",
            }
        ]
    }
]

startGame();

*, *::before, *::after {
    box-sizing: border-box;
}   

.nav {
    z-index: 1;
}

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
}

.main {
    z-index: 0;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: 'Times New Roman', Times, serif;
}

#menuToggle {
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;

    z-index: 2;

    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a {
    text-decoration: none;
    color: white;
    
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: tomato;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    z-index: 3;

    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: white;
    border-radius: 3px;

    z-index: 2;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}
  

 #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
  

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: none;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

.container {
    width: 1000px;
    height: 90%;
    max-width: 80%;
    background-color: white;
    border-radius: 7px;
    box-shadow: 0 0 10px 2px;
    display: grid;
    grid-template-rows: 60% 40%;
}

.container-lower {
    border-top: 10px solid rgba(0,0,0,1);
    position: relative;
}

.container-upper {
    position: relative;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.btn {
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px 10px;
    width: 400px;
    color: black;
    outline: none;
    font-size: 25px;
    font-family: 'Times New Roman', Times, serif;
}

.btn:hover {
    border-color: grey;
    color: grey;
}

#text {
    font-size: 30px;
    text-align: center;
}

#image {
    width: 650px;
    height: 150px;
    background-repeat: no-repeat;
    margin: 40px auto 0px auto;
    background-size: 650px 150px;
}

.wrapper {
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <script defer src="game.js"></script>
    <title>Case Study 1</title>
</head>

<body>
    <div class="nav">
        <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="#">
                    <li>Home</li>
                </a>
                <a href="#">
                    <li>About</li>
                </a>
                <a href="#">
                    <li>Info</li>
                </a>
                <a href="#">
                    <li>Contact</li>
                </a>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="container-upper">
                <div class="wrapper">
                    <div id="text" class="text">Text</div>
                    <div id="image"></div>
                </div>
            </div>
            <div class="container-lower">
                <div id="option-buttons" class="btn-grid">
                    <button class="btn">Option 1</button>
                    <button class="btn">Option 2</button>
                    <button class="btn">Option 3</button>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 1

The problem is not with your navbar but with the body of your webpage. Just add margin: 0 and padding: 0 to your body and the scrollbars should disappear.

Check and run the following Code Snippet or this CodePen for a practical example of your webpage with the margin: 0 property added:

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')

let state = {}

function startGame() {
    state = {};
    showTextNode(1);
}

function showTextNode(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
    textElement.innerText = textNode.text;
    while(optionButtonsElement.firstChild) {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild);
    }

    document.getElementById('image').style.display = "block"
    textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none";

    textNode.options.forEach(option => {
        if(showOption(option)) {
            const button = document.createElement('button');
            button.innerText = option.text;
            button.classList.add('btn')
            button.addEventListener('click', () => selectOption(option));
            optionButtonsElement.appendChild(button);
        }
    })
}

function showOption(){
    return true;
}

function selectOption(option) {
    const nextTextNodeId = option.nextText;
    state = Object.assign(state, option.setState)
    showTextNode(nextTextNodeId)
}

const textNodes = [
    {
        id: 1,
        text: 'Case Study: BioPharma Expansion',
        options: [
            {
                text: 'Start',
                setState: {},
                nextText: 2
            }
        ]
    },
    {
        id: 2,
        text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
        options: [
            {
                text: "I'd like to know more about BioPharma's revenue",
                setState: {},
                nextText: 3
            },
            {
                text: "I'd like to know more about BioPharma's cost structure",
                setState: {},
                nextText: 3
            }   
        ]
    },
    {
        id: 3,
        text: "BioPharma's revenue has increased year on year by 12% since 2014",
        options: [
            {
                text: "What about costs?",
                setState: {},
                nextText: 4
            }
        ]
    },
    {
        id: 4,
        text: "BioPharma's cost structure is shown below in Figure 1",
        imageLink: "figure1a.png",
        options: [
            {
                text: "Here is some stuff",
            }
        ]
    }
]

startGame();

*, *::before, *::after {
    box-sizing: border-box;
}   

.nav {
    
}

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
}

.main {
    z-index: 0;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    font-family: 'Times New Roman', Times, serif;
}

#menuToggle {
    display: block;
    position: absolute;
    top: 40px;
    left: 40px;

    z-index: 2;

    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a {
    text-decoration: none;
    color: white;
    
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: tomato;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    z-index: 3;

    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;

    background: white;
    border-radius: 3px;

    z-index: 2;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #232323;
}
  

 #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
  

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: none;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}

.container {
    width: 1000px;
    height: 90%;
    max-width: 80%;
    background-color: white;
    border-radius: 7px;
    box-shadow: 0 0 10px 2px;
    display: grid;
    grid-template-rows: 60% 40%;
}

.container-lower {
    border-top: 10px solid rgba(0,0,0,1);
    position: relative;
}

.container-upper {
    position: relative;
}

.btn-grid {
    display: grid;
    grid-template-columns: repeat(1, auto);
    gap: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.btn {
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    padding: 10px 10px;
    width: 400px;
    color: black;
    outline: none;
    font-size: 25px;
    font-family: 'Times New Roman', Times, serif;
}

.btn:hover {
    border-color: grey;
    color: grey;
}

#text {
    font-size: 30px;
    text-align: center;
}

#image {
    width: 650px;
    height: 150px;
    background-repeat: no-repeat;
    margin: 40px auto 0px auto;
    background-size: 650px 150px;
}

.wrapper {
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

    <div class="nav">
        <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="#">
                    <li>Home</li>
                </a>
                <a href="#">
                    <li>About</li>
                </a>
                <a href="#">
                    <li>Info</li>
                </a>
                <a href="#">
                    <li>Contact</li>
                </a>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <div class="container-upper">
                <div class="wrapper">
                    <div id="text" class="text">Text</div>
                    <div id="image"></div>
                </div>
            </div>
            <div class="container-lower">
                <div id="option-buttons" class="btn-grid">
                    <button class="btn">Option 1</button>
                    <button class="btn">Option 2</button>
                    <button class="btn">Option 3</button>
                </div>
            </div>
        </div>
    </div>

According to the accepted answer on this other SO thread, the reason why margin and padding are not 0 by default is because browsers have different default style-sheets.

Answer 2

you can set the body padding & margin to 0,

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0
}

this solves your current problem, but may get the same problem again in other divs, what I usually do is to set all paddings and margins to zero. like this

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

You need to learn how to debug your css: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS

Answer 3

Change your css body attributes to the following:

body {
    z-index: 0;
    background-color: black;
    width: 100vw;
    height: 100vh;
    padding: 0px;
    margin: 0px;
}

By setting the padding and margin to 0px for the body, you'll get rid of the scrollbars both vertically and horizontally :)