Съезжает всё в шапке в левую сторону при открытии сайта на ноутбуке

Question

Всем привет! Решил сверстать сайт с нуля. Всё было хорошо до того момента когда я решил открыть сайт на своём 14ти дюймовом ноутбуке. Не подскажите что не так с шапкой?

body {
  background: #dfe1dc;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #000;
}

a {
  font-size: 16.5px;
  text-decoration: none;
  font-weight: 500;
  color: #000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  margin: 0px 150px;
}


/* Header */

.header {
  padding: 40px 0px 30px 0px;
}

.header_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.header_input {
  display: flex;
  align-items: center;
  margin-right: 17em;
}

.header_input input {
  background-color: #e7e9e4;
  padding: 11.4px 30px;
  width: 427px;
  border: none;
  outline: none;
  border-radius: 10px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}

.header_input button {
  border: none;
  outline: none;
  background-color: #e7e9e4;
  border-radius: 10px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
  background-color: #ba8f50;
}

.header_input button:hover {
  cursor: pointer;
  transition: 0.1s;
  filter: brightness(1.2);
}

.max_size_logo {
  width: 30px;
  height: 30px;
}

.nav {
  display: flex;
  gap: 45px;
  opacity: 0.7;
}

.nav>a {
  font-size: 18px;
}

.nav>a:hover {
  color: #ba8f50;
  transition: 0.2s;
}

.header_login>a>img {
  width: 32px;
  height: 32px;
  margin-left: 4px;
}

.header_login>a>p {
  font-size: 14px;
}

.header_cart>a>img {
  width: 32px;
  height: 32px;
  margin-left: 8.5px;
}

.header_cart>a>p {
  font-size: 14px;
}

.header_contact {
  text-align: center;
  display: flex;
  margin-left: -270px;
  gap: 30px;
}

.header_log_Cart {
  display: flex;
  gap: 30px;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Кофе и мир</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />

  <link rel="stylesheet" href="./style.css" />
  <link rel="shortcut icon" href="./assets/images/logo.png" />
</head>

<body>
  <header class="header">
    <div class="container">
      <div class="header_content">
        <figure>
          <a href="#"><img style="width: 100px; height: 100px" src="./assets/images/logo.png" alt="Проблемы с изображением" title="Кофе и мир" />
            <span style="
                      font-family: 'Bitter', serif;
                      text-align: center;
                      font-size: 18px;
                    ">
                    <figcaption>Кофе и мир</figcaption>
                  </span>
          </a>
        </figure>
        <nav class="nav">
          <a href="#">Главная</a>
          <a href="#">Информация</a>
          <a href="#">Расположения</a>
        </nav>
        <div class="header_input">
          <input placeholder="Я хочу найти..." type="text" />
          <button>
                  <img
                    style="width: 35px; height: 35px"
                    src="./assets/images/search.png"
                    alt="Проблемы с изображением"
                    title="Поиск"
                  />
                </button>
        </div>
        <div class="header_contact">
          <a href="#" class="header_contact_whatsapp">
            <img src="./assets/images/whatsapp_logo.png" alt="Проблемы с изображением" class="max_size_logo" />
            <p style="font-size: 14px">WhatsApp</p>
          </a>

          <a href="https://t.me/mymenucoofee_bot" class="header_contact_telegram">
            <img src="./assets/images/telegram_logo1.png" alt="Проблемы с изображением" class="max_size_logo" />
            <p style="font-size: 14px">Telegram</p>
          </a>
        </div>
        <div class="header_log_Cart">
          <div class="header_login">
            <a href="#">
              <img src="./assets/images/user.png" alt="Проблемы с изображением" title="Войти" />
            </a>
            <a href="#">
              <p>Войти</p>
            </a>
          </div>
          <div class="header_cart">
            <a href="#">
              <img src="./assets/images/cart.png" alt="Проблемы с изображением" title="Корзина" />
            </a>
            <a href="#">
              <p>Корзина</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>
</body>

</html>

БЛОГ НА HUSL

Съезжает всё в шапке в левую сторону при открытии сайта на ноутбуке

Ответы (0 шт):