Что это за отступ?

Question

[Foxizix]

Начал учится адаптировать сайт под моб, что за отступ? т.е открываю на телефоне(залил на хостинг) тоже самое, верхняя менюшка на width 100%, т.е значение экрана 375px как и html и body 375px, а по факту экран больше и получается ещё и отступ какой то, ниже приложу код
(на фото параметры телефона 375х667) повторяю body как видите тоже 375px НО экран больше!

<div class="bod">

	<section class="menu">
		<a href="#">Главная</a>
		<a href="#">Новости</a>
		<a href="#">Скачать</a>
		<a href="#">Главная</a>
	
	
	</section>

	<div class="block">
		<h1>Тут Загаловок</h1>
		<h5>текст бла бла</h5>
		<section class="date">16.10.2022</section>
	</div>

</div>

.block{
	display:flex;
	flex-direction:column;
	width:50%;
	height:40%;
	border:3px dashed #F07427;
	color:white;
	text-align:center;
	padding:0px 20px 10px 20px;
	margin-top:10%;
	justify-content:center;
}


.menu{
	margin-top:0;
	width:50%;
	border:1px solid white;
	display:flex;
	justify-content:center;
	height:50px;
}

@media (max-width:400px){
	.menu{
		width:100%;
		padding:0;
	}
	.block{
		width:100%;
		height:700px;
	}
	.block h5{
		font-size:25px;
	}
}

Comments

[Ankhena]

Если к 100% прибавить 2 раза по 20px, то в 100% они не поместятся.
Читайте про box-sizing.
Или замените width на auto.

Answer 1

[historydev]

* {
box-sizing: border-box;
}

spoiler

padding:0px 20px 10px 20px;

Comments

[Foxizix]

спасибо огромное, всю голову сломал, помогло

Answer 2

[Andrew]

body {
margin: 0;
padding: 0;
}

?
P.S. Normalize тоже норм тема

Comments

[Foxizix]

так и стоит, но первый ответ помог