Width exceeding 100%, height exceeding 100vh

1

Here’s the codepen: https://codepen.io/homtanks/pen/pXmvmv?editors=1100

I’m doing my final portfolio project and I have a question. I’ve pasted the full code below because it’s short as I’ve only gotten started. I’ve commented the issue in the code as well.

  1. The issue is when I give the welcome section 100% width, it extends beyond the screen despite box-sizing: border-box . If i delete the border, it doesn’t extend past, but isn’t that what box-sizing is for? At the same time, the view height of the section gets slightly larger than 100vh. You can test this by commenting out the width of the section and see that it goes back to normal.

The border is only there for positioning purposes anyway, and I’ll delete it later, but it made me curious as to what’s happening here. Also, please disregard the color choices, I just use simple rgb colors when starting for visual aid. :slight_smile:

html {
    font-size: 100%;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/***********NAVBAR**************/
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    z-index: 10;
}

.nav-links {
    display: flex;
    padding: 15px;
    margin-right: 10px;
}
.nav-links a {
  color: red;
}

/**********WELCOME SECTION********/

#welcome-section {  
    width: 100%;  /*why is width greater than window?*/   
    height: 100vh; /*height is > 100vh with 100% width*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid;
    text-align: center;
    background: blue;
  
}

#projects {
  background: green;
}
2

You’re only applying box sizing the HTML element, it should be something like

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

If you want it to apply to everything (which you do 99.9999999% of the time)

3

Ahh, ok. I thought applying it to the html meant that all the code afterward would inherit that property. Thank you

1 Like
4