Как сделать так,чтобы объект при уменьшении окна браузера,объект не выходил за границы видимости?

Question

[Tempest99]

хочу,чтобы вне зависимости от размера окна,карта не вылезала за границу.

<section class="contacts">
										<div class="container">
											<div class="row">
												<div class="col-xl-6 col-lg-4 col-sm-12">
													<h2>Контакты</h2>
													<p>Адрес офиса: <br>Москва, копейское шоссе, 12, офис 34</p>
													<div class="map">
														<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d577336.7638984495!2d36.82513038949304!3d55.5807480820225!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54afc73d4b0c9%3A0x3d44d6cc5757cf4c!2z0JzQvtGB0LrQstCw!5e0!3m2!1sru!2sru!4v1579799031347!5m2!1sru!2sru" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
													</div>
													<p>Номер телефона: <br><strong>[phone]</strong></p>
													<p>E-mail: <br> <a href="mailto:[e-mail]">[e-mail]</a></p>

													<p>Реквизиты: <br>ИНН 35453453 ОГРН 34234234</p>
												</div>
												<div class="col-xl-4 offset-xl-2 col-lg-5 offset-lg-3 col-md-8 offset-md-2 col-sm-8 offset-sm-2 col-10 offset-1">
													<div class="main-form contacts-form">
														<form action="#">
															<h2>Оставьте контактные данные <br>для связи</h2>
															<label for="#">Ваше имя</label>
															<input class="main-form-input" type="text">
															<label for="#">Номер телефона</label>
															<input class="main-form-input" type="text">
															<label for="#">E-mail</label>
															<input class="main-form-input" type="text">
															<label for="#">Сообщение</label>
															<textarea class="main-form-input"   rows="5"></textarea>
															<button class="button main-form-btn request" type="submit">записаться на просмотр</button>
															
														</form>

													</div>
												</div>
											</div>
										</div>
				</section>

.contacts {
  background: #ffffff url(../img/contacts/contacts_bg.jpg) center no-repeat;
  background-size: cover;
}
.contacts h2 {
  font-size: 3.6rem;
  line-height: 5.8rem;
  font-family: 'ProximaNova_bold', sans-serif;
  margin-bottom: 5rem;
}
.contacts p {
  font-size: 1.8rem;
  margin-bottom: 2rem;
}
.contacts .map {
  margin: 3rem 0;
}
.contacts-form h2 {
  font-size: 1.8rem;
  line-height: 2rem;
  font-family: 'ProximaNova_reg', sans-serif;
}
.contacts-form button {
  padding: 0;
}

Answer 1

[Тарас Шульга]

Там где карта задайте w100% а не фикс значение и все.