Something seems off on the Safari browser, as there's still a gap in the right side of the navbar and footer. I've been using Bootstrap and steering clear of Javascript. Any ideas on how to fix this? Appreciate any help. Thanks!
Here's the snippet of my HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Elysian</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="row">
<div class="col-md-9">
<img src="assets/white logo.png" class="logo" alt="logo">
</div>
<div class="col-md-1">
<a href="#" class = "header-heart-icon"><i class ="fa fa-heart-o"></i></a>
<p id="header-wishlist"><a href="#">Wishlist</a></p>
</div>
<div class="expand">
<p id="header-cart">Shopping List</p>
<p id="cart-item"> Chloé [1] $14,200</p>
<p id="cart-item"> Aquazzura [1] $4,425</p>
<hr>
<p>TOTAL</p>
<button type="button" class="btn btn-dark">Check Out</button>
</div>
</div>
<!-- Add the hover to shopping list-->
</header>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
...
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Below is a snippet of my CSS code:
body {
...
}
ul.breadcrumb {
...
}
...
.footer {
...
}
...
@media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
@media(max-width: 574px){
.footer-col{
width: 100%;
}
}
I've already attempted setting the body width to 100% and margin to 0, but the issue persists. Any suggestions on what could be causing this?