CODEWITHSUNDEEP
htmlcss
Unity Hour
Unity Hour

Reputation: 570

Css 100 viewport width being more than screen width?

enter image description here

The problem is about-me section is slightly more wider than the header section even though they both have the same width.You can even observe this in the picture. Blue background is header section inspected in console and white area is the about me section This is also showing the side navigation bar on the bottom which is trouble some.

 <!--Header Section   -->
    <section id="header">
        <div class="header-bg-overlay">
            <div class="header-bg">
                <div class="container">
                    <div class="hero-content">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="about-me">
        <div class="about-section">

        </div>
    </section>

CSS 

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
}

h5{
    color:white;
    font-size:75px;
    font-weight: bold;
}
h4{
    color:white;
    font-size:55px;
    font-weight: bold;
}
body{
    font-family: 'Roboto', sans-serif;
    margin:0;
    padding: 0;
}
.header-bg{
    width:100vw;
    height: 100vh;
    background-color: black;
    background: url('../assets/background.jpg')no-repeat center;
    background-position: -30px -80px;
}

#about-me{
    width:100vw;
    height: 100vh;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

Upvotes: 2

Views: 3726

Answers (3)

zarax
zarax

Reputation: 831

Space and new line characters in your HTML code are rendered as one-character space in the browser. Because of that, actually there is another element in addition to the box with 100vw and 100vh dimensions and this causes the overflow.

You have two options:

  1. Remove the new line and space characters before the opening tag and after the closing tag of the .header-bg element. These tags should be in touch with the tags of the parent element.
  2. Use display:flex on parent element. Contrary to other display options, flexbox does not render space characters around its children.

Upvotes: 0

DCat.ru
DCat.ru

Reputation: 1

vw = document + scrollbar.

Fix:

.header-bg, #about-me {
  width: 100vw;
  max-width: 100%
}

Upvotes: 0

aman sharma
aman sharma

Reputation: 17

Try to change the width of both the sections to 100%

Upvotes: 1

Related Questions