1- Seeking advice on an issue with the Header Section not following centering classes (d-flex justify-content center) in Bootstrap 4. Unable to center the text as desired.
2- Font Awesome displays oddly, looking to create a circle around it similar to a logo but found SVG while inspecting.
@import url('https://fonts.googleapis.com/css?family=Lato|Montserrat|Roboto&display=swap');
body{
font-family: 'Lato', sans-serif;
}
input[type="text"]{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #c0c0c0;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
header .container{
padding: 35px 20px 0;
max-width: 950px;
}
nav a{
text-transform: uppercase;
}
i{
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding:10px;
color: red;
}
.bg-dark{
background-color: #343a4000!important;
}
.navbar-brand{
text-transform: capitalize;
}
.navbar-dark .navbar-brand{
font-size: 1.5rem;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(255, 255, 255);
font-size: 1rem;
}
header{
background: url('https://images.unsplash.com/uploads/1412198485051133af17f/5049dacb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80') no-repeat center center/cover;
min-height: 724px;
color: #fff;
}
.showcase-text h1{
font-size: 3rem;
}<!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">
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Animate CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
<!-- FontAwesome -->
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<!-- Wow.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js">
<!-- Hover.css Lib -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<link rel="stylesheet" href="css/app.css">
<title>Cairo Eat | Best Restaurants in Egypt at your Hand</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#"><span><i class="fas fa-utensils food-icon mr-1"></i> </span> CairoEat</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 ">
<a class="nav-link" href="#">Sign Up <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log in</a>
</li>
<li class="nav-item">
</li>
</ul>
</div>
</nav>
<div class="container text-center d-flex flex-column justify-content-center">
<h1>Hungry? Find the food you're looking for.</h1>
<p>Your city's best eats, ready to be ordered online.</p>
<input type="text" placeholder=" City or Address">
<!-- <input type="submit" value="Search" class="btn btn-danger p-2 pl-3 pr-3"> -->
<button type="submit" class=" btn btn-danger p-2 pl-3 pr-3">Search</button>
</div>
</header>
</body>
</html>