So, my problem is, that my divs all seem like they are 100% width, but they are actually not, if you look in inspect elements. Problem is not there until I add 2 new divs under Section 1 in body. Before I add 2 new divs, the width of header is 1000px and width of window is 1000px, but when I add this 2 new divs, then header is 17px less than window width, but still looks like it's 100%. And that is not only messing up header, but all elements are short for 17px after I add this 2 divs. I can't figure this out..
Here you can see what I mean: Fiddle
var header = document.getElementsByClassName("header")[0].clientWidth;
var headerWidth = document.getElementsByClassName("header-width")[0];
headerWidth.innerHTML = "Header width is: <span>" + header + "</span>, but window width is: <span>" + window.innerWidth + "</span>";
window.onresize = () => {
header = document.getElementsByClassName("header")[0].clientWidth;
headerWidth.innerHTML = "Header width is: <span>" + header + "</span>, but window width is: <span>" + window.innerWidth + "</span>";
}/* Root ------------------------------------------------- */
:root {
font-size: 62.5%;
--orange-color: #FFB82F;
--background-dark-1: #222222;
--background-dark-2: #2B2B2B;
--text-color: #E7E7E7;
--drop-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Root END --------------------------------------------- */
/* Global ----------------------------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
position: relative;
font-family: sans-serif;
font-size: 0;
}
/* Text --------------------------------------- */
/* Section title text --------------- */
.section-title {
font-size: 3rem;
font-weight: 500;
color: var(--orange-color);
text-decoration: underline;
}
/* Global END ------------------------------------------- */
/* Header ----------------------------------------------- */
.header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
background: #1A1A1A;
z-index: 100;
}
/* Logo --------------------------------------- */
.logo {
float: left;
}
.logo a {
display: block;
text-decoration: none;
color: white;
font-family: cursive;
font-size: 3.7rem;
line-height: 80px;
padding: 0 20px;
}
/* Toggle menu button ------------------------- */
#toggle {
display: none;
}
/* Menu --------------------------------------- */
.menu-box {
float: right;
}
.menu ul {
list-style: none;
}
.menu li {
display: inline-block;
}
.menu a {
display: block;
padding: 0 10px;
line-height: 80px;
text-decoration: none;
color: white;
font-size: 1.8rem;
font-weight: 700;
transition: color 75ms ease-in-out;
}
.menu a:hover {
color: var(--orange-color);
}
.menu li:last-child {
margin-right: 10px;
}
/* Header END ------------------------------------------- */
/* Page content: Home page ------------------------------ */
/* Hero section ------------------------------- */
.hero-section {
position: relative;
width: 100%;
height: calc(100vh - 80px);
margin-top: 80px;
background-size: cover;
background-position: 80% 50%;
}
.hero-section-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(18, 18, 18, 0.6);
}
.hero-text {
font-size: 5rem;
font-weight: 300;
color: white;
}
.hero-text span {
color: var(--orange-color);
}
.hero-btn {
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: 30px;
width: 70px;
height: 70px;
background: var(--background-dark-2);
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
cursor: pointer;
}
/* Page content: Home page END -------------------------- */
.header-width {
position: fixed;
top: 0;
transform: translateX(-50%);
left: 40%;
font-size: 2rem;
color: white;
z-index: 101;
}
.header-width span {
color: red;
}
.header-width span:nth-child(2) {
color: green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Header -------------------------------------------- -->
<div class="header">
<!-- Logo ------------------------------------ -->
<div class="logo">
<a href="#">Logo</a>
</div>
<!-- Toggle menu button ---------------------- -->
<input type="checkbox" id="toggle">
<label for="toggle" id="toggle-btn">
<div class="fa-bar"></div>
<div class="fa-bar"></div>
<div class="fa-bar"></div>
</label>
<!-- Menu -->
<div class="menu-box">
<div class="menu">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</div>
</div>
</div>
<!-- Header END ---------------------------------------- -->
<!-- Page content: Home page --------------------------- -->
<!-- Hero section ---------------------------- -->
<div class="hero-section">
<div class="hero-section-overlay">
<p class="hero-text">Hello.</p>
<div class="hero-btn">
</div>
</div>
</div>
<!-- THIS ARE 2 DIVS I ADDED AND THEN PROBLEM IS HERE -->
<!-- Section 1, About us ---------------------- -->
<div class="h-about-us">
<div class="h-about-us-box">
<p class="section-title">About us</p>
</div>
</div>
<!-- Page content: Home page END ----------------------- -->
<p class="header-width">Header width is:</p>
</body>
</html>You have a 16px difference between your header width and window windth that's because that 16px is for the scrollbar. If you hide the scrollbar by editing your body tag's css with overflow:hidden; then you will see both header and body has the same width