Trying to align text and an image side by side in a container while utilizing Bootstrap.
Example:
https://i.sstatic.net/63KZe.jpg
Blue = Device screen, Black = visible container
Encountering issues where the map embed shifts downward unexpectedly.
https://i.sstatic.net/k6Vhk.jpg
No visible margins or padding causing the shift, nor is it clear why the text displays as blue despite being set to black in the CSS.
HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/locations.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Locations | Location 1</title>
</head>
<body>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="../index.html">
<img src="https://via.placeholder.com/100x40" alt="../index.html">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-large nav-text-bold" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
<div class="dropdown-menu text-mid" aria-labelledby="dropdown01">
<a class="dropdown-item nav-text-bold" href="locations/location1/index.html">Location 1</a>
<a class="dropdown-item nav-text-bold" href="#">Location 2</a>
<a class="dropdown-item nav-text-bold" href="#">Location 3</a>
<a class="dropdown-item nav-text-bold" href="#">Location 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-large nav-text-bold" href="#">Media</a>
</li>
<li class="nav-item">
<a class="nav-link text-large nav-text-bold" href="donate/index.html">Donate</a>
</li>
<li class="nav-item text-large">
<a class="nav-link nav-text-bold" href="#">About</a>
</li>
</ul>
</nav>
<br>
<br>
<div class="container">
<div id="content">
<div class="jumbotron row" style="display:flex">
<div class="col-md-6 m-3 text-info">
<p>1600 Pennsylvania Ave NW, Washington, DC 20500</p>
<p>Open Weekdays sometime to sometime</p>
<p>Tel:
<a href="tel:555-555-5555"><b>555-555-5555</b></a></p>
</div>
<div class="col-md-6 maps-embed mt-3 text-right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3105.1501993708266!2d-77.03871848469284!3d38.89768045453255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b7bcdecbb1df%3A0x715969d86d0b76bf!2sThe%20White%20House!5e0!3m2!1sen!2sus!4v1574888816470!5m2!1sen!2sus" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<br>
<br>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
CSS: (locations.css)
.container{
text-align: center;
}
.jumbotron{
padding-left: 10px;
padding-right: 10px;
}
.text-info{
color: black;
text-align: left;
}
.maps-embed{
text-align: right;
}
.headerText{
padding-top: 10%;
}
.text-mid{
font-size: 120%;
text-decoration: underline;
}
.text-mid:hover::after{
text-decoration: underline;
}
.text-large{
font-size: 140%;
text-decoration: underline;
}
.text-large:hover{
text-decoration: underline;
}
.nav-text-bold{
font-family: 'Roboto', sans-serif;
}
Attempting to apply Bootstrap Grid system for better alignment. Any insights on how the grid can be integrated further?