How do I keep person on right side but not flow off to right?
I’ve tried a few different things but I can’t get it to stop flowing off the right hand side…
I’d also like to have it zoomed in on the head area all the time without having to edit the image.
I can’t submit this without adding some more text, so I’m hoping that I don’t have to do a lot more to submit this…
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet">
</head>
<body>
<div
class="masthead1"
style="background-image: url('./images/GirlWithPhone.jpg');"
>
<div
class="color-overlay d-flex justify-content-center align-items-center">
<h1>Test-04</h1>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
<script src="{% static 'main/js/bootstrap.min.js' %}"></script>
</div>
</body>