Currently, I am working on a mockup using Bootstrap 4 and have encountered an unusual element inside the container where the background extends beyond the container. I'm not sure how to address this issue effectively. I attempted to use position: absolute, but I am concerned about its impact on responsiveness.
The problematic element in question is the "Watch the video" text with a background.
Any assistance would be greatly appreciated. Thank you.
https://i.sstatic.net/wT3bd.png
/* VIDEO */
.video {
padding: 70px 0;
position: relative;
}
.video .video-wrapper p {
font-size: 14px;
line-height: 30px;
font-style: italic;
margin-top: 10px;
}
.video .description-wrapper h3 {
font-size: 20px;
line-height: 25px;
}
.video .description-wrapper .box {
padding: 10px 15px;
}
.bg-colored {
color: #fff;
background-color: #0b3b52;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Videos</title>
</head>
<body>
<section class="video">
<div class="container">
<div class="row">
<div class="col-md-5 video-wrapper">
<img src="https://i.imgur.com/mVWlLQt.png" class="img-fluid" alt="">
<p>Name video 5:45</p>
</div>
<div class="col-md-7 description-wrapper">
<div class="row align-items-center">
<div class="col-md-6 box">
<h3>Keep your club organized online,
we save time and energy for you!
</h3>
</div>
<div class="col-md-6 box bg-colored">
<h3>Watch the video</h3>
</div>
<div class="col-md-12">
<p>
Managing a team could also be a hassle-free and easy activity.
CRM42 is a web-based platform with a user-friendly interface, offering a comfortable and profitable experience while using it. Create your new management strategy and focus on getting the best results.
Your goal is now our goal!
</p>
<p>
CRM42 gives you a complete solution with a 360-degree view of your players, including complete management of their contracts, injuries, medical data, offers, past teams, family members, bank accounts, sponsors' information. Accessible for your entire staff, anytime from anywhere.
</p>
<p>
Let’s make something awesome together!
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>