Help needed right here! I'm working on styling this booking form to match my layout but encountering some pesky bugs that are proving difficult to fix.
During inspection of the submit button, I noticed a mysterious right margin that I can't seem to get rid of. The culprit may be related to a bootstrap grid, but all attempts to resolve it have been unsuccessful so far.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/2dedfa30a2.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="booking">
<div class="service-box">
<button><i class="fas fa-plane-departure"></i>Tours</button>
<button><i class="fas fa-car"></i>Rent a car</button>
</div>
<div class="booking-form">
<form>
<div class="row justify-content-center no-margin">
<div class="col-md-2">
<div class="form-header">
<span>Find Your</span><br>
<b>Destination</b>
</div>
</div>
<div class="col-md-8">
<div class="row no-margin">
<div class="col-md-4">
<div class="form-group">
<span class="form-label">Where to</span>
<input class="form-control" list="browsers" name="myBrowser" placeholder="Enter a country">
<datalist class="form-control" id="browsers">
<option value="Spain">
<option value="France">
<option value="Italy">
<option value="United States">
</datalist>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span class="form-label">From</span>
<input class="form-control" type="date">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span class="form-label">To</span>
<input class="form-control" type="date">
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-btn">
<button class="submit-btn"><i class="fas fa-search"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
... (remaining CSS styles)