Почему в браузере автоматически появляются отступы с боковых сторон?
Браузер по умолчанию задаёт отступ странице: цсс-свойство margin для хтмл-тега body.
Чтобы убрать ненужный отступ, считается плохой практикой писать следующий цсс:* {
    margin: 0;
    padding: 0;
}
Причина — добавляет ненужного кода элементам. У большинства и так нулевые дефолтные отступы, а у других (например, заголовков, списков) обычно задаются свои.
Опытные ребята обнуляют отступы и другие стили c помощью reset.css или normalize.css. Минусы такого похода:Не делается ничего из того, что хочет ваш дизайнер.Половина описанных элементов не используется.Повышается сложность чтения и объём байтиков: браузер добавляет стили по умолчанию, рисет всё обнуляет, вы добавляете своё. В инспекторе — портянка зачёркнутых свойств.Неуниверсально. Если захотите использовать блоки повторно, на другом проекте всё сломается. Чтобы починить, нужно будет искать старый рисет.
Яндекс советует не использовать селекторы на звёздочку, не сбрасывать стили, а писать универсальные блоки. Ваш случай:.page {
    margin: 0;
}<body class="page">Источник
* {
margin:0;
padding:0;
}
У браузера по умолчанию есть свои стили которые нужно сбрасывать