좀 이해가 안 돼, 이런 상태야.

이 그림을 보면 헤더의 배경색이 내용의 가장자리에 전달되지 않았음을 알 수 있을 것이다.

까닭

브라우저에 가로 스크롤 막대가 나타나면 이 현상이 발생합니다.
가로 스크롤 막대는 바디에서 요소의 폭이 바디의 너비보다 클 때 발생합니다.
이건 Developer Tools로 조사하면 쉽게 알 수 있을 것 같아요.

(파란색 부분은 바디의 위치와 크기를 나타낸다)
이 경우 바디의 너비 자체가 내용의 가장자리에 존재하지 않기 때문에 머리에 width:100%를 지정해도 내용의 가장자리에 이르지 못한다.

대응법

바디에min-width

지정

내용의 가로폭이 바디의 가로폭보다 크지 않도록 방지

머리를 추종 유형으로 설정

body에서 min-width 지정하기

바디의 폭을 지정하지 않으면 브라우저의 폭과 같습니다.
바디의min-width에서 바디 내 내용의 너비 이상의 값을 지정하면 이 문제를 해결할 수 있습니다.
예를 들어 Qita의 경우 내부 내용의 폭이 1000px보다 조금 넓기 때문에 바디에min-width:1020px를 지정하면 문제를 해결할 수 있다.
하지만 이 방법은 내부 내용의 폭을 모르면 사용할 수 없다.
또한 이러한 처리 방법에서 브라우저의 폭을 줄이면 가로 스크롤 바가 나온다.
(최근 사이트의 주류는 스크롤 바가 없어서 개인의 취향에 문제가 있을 수 있다.)
나는 이것이 기존 사이트의 문제를 가장 쉽게 해결할 수 있다고 생각한다.

내용의 폭이 바디의 너비보다 크지 않도록 방지하다

원래 가로로 스크롤 줄이 나오지 않도록 하는 해결 방법이다.
가로 스크롤 바가 나타나는 원인은 바디에서 원소의 폭이 바디의 폭보다 크기 때문에 이 문제를 해결할 방법을 생각해야 한다.
왜 바디의 요소의 폭이 바디의 폭보다 클까요? 이유는 다음과 같습니다.

% 이외에 width를 지정한 블록 요소가 있는데 그 width는 바디의 너비

보다 크다.

큰 이미지 있음(레이블)

문장에 중간에 줄을 바꿀 수 없는 단어가 포함되어 있다

하나의 블록 요소가 width를 지정했는데, 그 width는 바디의 너비보다 크다

기본적으로 width는% 지정이 아닌 (px 등으로 지정) 과 가로 스크롤 바가 나타나는 원인입니다.
어쨌든% 이외의 수치로width를 지정해야 할 때,body에min-width를 추가하십시오.
아이콘과 단추 등의 작은 사이즈는 px 등으로 지정해도 문제가 없습니다.

큰 크기 이미지 존재

그림 (탭) 의 width는 그림의 원래 너비와 같습니다.
이것은 상술한 width를 지정할 때와 같은 문제입니다.
width에% 지정치를 사용하면 해결할 수 있지만 그러면 번거로움이 많기 때문에 max-width에 100%를 미리 지정하면 순조롭습니다.

한 문장에는 중간에 줄을 바꿀 수 없는 단어가 포함되어 있다

이것은 문장에 긴 영어 단어나 URL을 사용한 상태에서 놓은 것이다.
구체적인 예는 다음과 같다.

<h1>途中で改行できない例</h1>
<div style="width:50px; border:1px solid black">
    http://qiita.com/
</div>

<h1>途中で改行できる例</h1>
<div style="width:50px; border:1px solid black">
    We Are The World
</div>

해결 방법은word-wrap break-word;설정
참조: 스타일시트 참조
그러나break-word를 지정하면 영어 단어가 중간에 줄로 바뀌어 읽기 어려울 수 있으니 주의하세요.

헤더를 따르는 형식으로 설정합니다

브라우저를 따라 스크롤하는 형식으로 머리글을 설정하면 이 문제가 발생하지 않습니다.
눈썹의position에서fixed를 지정하고 원시 눈썹의 위치(페이지의 맨 위)에 눈썹 높이와 같은 자리 차지 문자를 놓으면 된다.

총결산

PC를 위한 사이트를 만들려면 바디나 머리에 민width를 넣는 것이 가장 빠른 해결책이다.
실제 PC 버전의 구글 검색 페이지의 헤더가min-width로 설정되어 있습니다.(이 글을 편집할 때 확인)
하지만 저는 개인적으로 스마트폰을 향해 가로로 굴러가는 것을 좋아하지 않기 때문에 지정된 Min-width 이외의 방법으로 해결하는 것이 좋습니다.
이 외에도 JavaScript를 해결 방법으로 사용할 수 있습니다.