Tengo un pequeño problema al momento de realizar el responsive , para mostrar la ubicación de un mapa en bootstrap, como adjunto en la imagen así me visualiza en un teléfono de resolución 320*480, en resoluciones posteriores no existe inconveniente alguno, el problema solo reside al visualizar en dispositivos celulares, y el cliente me pide que lo visualice de la manera correcta en todas las resoluciones posibles si alguien me podría ayudar para ver que estoy realizado de manera errónea.
<!doctype html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="shortcut icon" href="../../img/web/ico_dientes_sanos.ico">
<title>Clínica Dental Equilibrium</title>
</head>
<body>
<!-- navbar -->
<div class="navbar-dark bg-dark">
<nav class="container navbar navbar-expand-md navbar-light text-center">
<img src="../../img/web/ico_dientes_sanos.ico" width="30" height="30" alt="" loading="lazy">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cita">Cita</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#servicios">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#nosotros">Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonios">Sonrisas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#localizanos">Localízanos</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- localizacion -->
<div class="container">
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
<!--Google map-->
<!--Section: Contact v.1-->
<section class="section pb-5" id="localizanos">
<!--Section heading-->
<h2 class="section-heading h1 pt-4">Contáctenos</h2>
<!--Section description-->
<p class="section-description pb-4">Si deseas más información te invitamos a enviarnos un correo a la siguiente dirección de correo electrónico <a href="mailto:[email protected]">[email protected].</a> donde resolveremos todas tus dudas y consultas.</p>
<div class="row">
<!--Grid column-->
<div class="col-lg-6 mb-4">
<!--Form with header-->
<div class="card">
<div class="card-body">
<!--Header-->
<div class="form-header blue accent-1">
<h3><i class="fas fa-envelope"></i> Write to us:</h3>
</div>
<p>We'll write rarely, but with only the best content.</p>
<br>
<!--Body-->
<div class="md-form">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form-name" class="form-control">
<label for="form-name">Your name</label>
</div>
<div class="md-form">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="text" id="form-email" class="form-control">
<label for="form-email">Your email</label>
</div>
<div class="md-form">
<i class="fas fa-tag prefix grey-text"></i>
<input type="text" id="form-Subject" class="form-control">
<label for="form-Subject">Subject</label>
</div>
<div class="md-form">
<i class="fas fa-pencil-alt prefix grey-text"></i>
<textarea id="form-text" class="form-control md-textarea" rows="3"></textarea>
<label for="form-text">Icon Prefix</label>
</div>
<div class="text-center mt-4">
<button class="btn btn-light-blue">Submit</button>
</div>
</div>
</div>
<!--Form with header-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-12 col-sm-12 col-md-6 col-lg-6">
<!--Google map-->
<div id="map-container-google-11" class="z-depth-1-half map-container-6">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d825.2495342706723!2d-70.7160187708199!3d-34.171965298785835!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9663458bc62723c3%3A0xedf120ae507f044b!2sClinica%20Equilibrium%20Rancagua!5e0!3m2!1ses-419!2sec!4v1610317986865!5m2!1ses-419!2sec"
width="500" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
tabindex="0"></iframe>
</div>
</div>
<!--Grid column-->
</div>
</section>
<!--Section: Contact v.1-->
<!--Google Maps-->
</div>
</div>
<!-- footer -->
<div class="">
<footer class="bg-dark text-center py-3">
<a href="">Copyright ©
<script>
var f = new Date();
document.write(f.getFullYear());
</script>
Clínica Equilibrium
</a>
</footer>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
De antemano le agradezco su ayuda.
Saludos.
col-sm-12
y quita elwidth:500
(Para que no depende de ello)