After creating my header and using an SVG to divide the section, I noticed a line appearing below the SVG. To try and cover it up, I added an empty white background line using :: after in CSS with the content empty, but the issue persisted. You can see the line at the end that corresponds to the background here
.header {
background-image: url(../img/bg-header.jpg);
background-position: center;
background-size: cover;
position: relative;
}
#logo-header {
--tam: 40px;
width: var(--tam);
}
a{
color: #fff;
}
.header::after {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #fff;
position: absolute;
left: 0;
bottom: 0;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="juan diego gutierrez">;
<meta name="description" content="">;
<meta name="keywords" content="">;
<title>Trip trip</title>;
<!-- CSS Bootstrap -->;
<link rel="stylesheet" href="./css/bootstrap.min.css" />;
<!-- CDN Font awesome -->;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>;
<!-- CSS Main -->
<link rel="stylesheet" href="./css/main.css" />;
</head>;
<body>;
<!-- header -->;
<header class="header">;
<div class="container pt-2">;
<!-- navbar -->;
<nav class="navbar navbar-expand-lg">;
<a class="navbar-brand" href="#"> <img id=\"logo-header\" class="mr-1" src="img/logo-white.svg" alt="logo">WESTON</a>;
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">;
<span class="navbar-toggler-icon"></span>;
</button>;
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">;
<ul class="navbar-nav">;
<li class="nav-item active">;
<a class="nav-link" href="#">HOME</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">EXPERIENCE</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">FEATURES</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">CONTACT</a>;
</li>;
</ul>;
</div>;
</nav>;
<!-- description -->;
<div class="col-6 mt-5 pt-5">;
<h6 class="text-warning">The Great Outdoor</h6>;
<h1 class="text-white">Adventure</h1>;
<p class="text-white">Lorem ipsum dolor sit, amet, consectetur adipisicing elit. A vitae, impedit, nesciunt velit iusto modi.</p>;
<a href="#" class="btn btn-warning text-white mt-2">Buy now</a>;
</div>;
</div>;
<!-- cut-image -->;
<img src="img/cuts/cut-header.svg" alt="division section">;
</header>;
<!-- Jquery -->;
<script src="./js/jquery-3.5.0.min.js"></script>;
<!-- Popper -->;
<script src="./js/popper.min.js"></script>;
<!-- JS Bootstrap -->;
<script src="./js/bootstrap.min.js"></script>;
</body>;
</html>