Страница вылезает за рамки с фрэймом карты и даже без неё

Question

Создал шапку и добавил 2 небольших блока, страница начала уходить в бок, появилась горизонтальная крутилка внизу. А когда добавил фрэйм карты, так вообще убежала.Не знаю как фиксить, помогите пожалуйста.

[ 1 картинка где убежала фулл страница из-за карты][1]

Вот код:

body {
  background-color: #FF99CC;
  margin-bottom: 0;
}

header {
  position: center;
  height: 80px;
  width: auto;
  margin: 10px;
  margin-top: 20px;
  background: #FF3366;
  border-radius: 20px;
  /* position: fixed; */
  /* height: 80px; */
  /* width: 100%; */
  /* margin: 0; */
  /* background: #9933FF; */
  /* background-size: cover; */
  /* background-position: top center; */
  /* margin-bottom: 100px; */
  /* position: relative; */
  /* height: 80px; */
}

h1 {
  font-size: 40px;
  position: relative;
  left: 40px;
  top: 15px;
  font-family: "Bebas Neue", sans-serif;
}

.m22 {
  background-color: aliceblue;
  width: 600px;
  height: 600px;
  position: relative;
  left: 300px;
  top: 100px;
  border-radius: 30px;
}

.m23 {
  background-color: #CCCCCC;
  width: 500px;
  height: 500px;
  position: relative;
  left: 50px;
  top: -50px;
  border-radius: 30px;
  z-index: 1;
}

p {
  font-size: 30px;
  position: relative;
  top: 50px;
  margin-left: 30px;
  font-family: "Fjalla One", sans-serif;
}

.u21 {
  color: #0099FF;
}

.k1 {
  position: relative;
  left: 1000px;
  top: -350px;
  border-radius: 30%;
}

<style>
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fjalla+One&display=swap');
</style>

<header>
  <h1>Popugaychik</h1>
</header>

<div class="m22">

  <div class="m23">
    <p>New collection from <span class="u21">Nbaranovski</span>
    </p>
  </div>
</div>
<div class="k1">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15281510.533710891!2d72.11084008847713!3d20.757378152060408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2z0JjQvdC00LjRjw!5e0!3m2!1sru!2sru!4v1717169243179!5m2!1sru!2sru"
    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

<!-- <h2></h2> -->
<!-- <h3></h3> -->

БЛОГ НА HUSL

Страница вылезает за рамки с фрэймом карты и даже без неё

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