I am in the early stages of learning to code with bootstrap and have encountered a frustrating issue. Every element I add after including the jumbotron component seems to automatically align itself to the left and remain stuck there. I have tried using .text-center, as well as custom CSS styling with properties like "text-align: center;" and "margin:0 auto;".
I am new here, so I hope this is the correct way to display my code. Here's what I've written:
<head>
<title>MyApp</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<style type="text/css">
.navbar-brand {
margin-right:10px;
position:relative;
top:2px;
}
.jumbotron {
margin-top:50px;
background-image: URL(BG.jpg);
background-size: 100% 100%;
text-align:center;
color: white;
}
.input-group {
width:350px;
}
#formAlign {
text-align:center;
width:350px;
margin:0 auto;
margin-top:30px;
}
#appsum {
text-align:center;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="logo.png" width="100" height="30" alt="">
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download The App</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="email" placeholder="Email" aria-label="Search">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Search">
<button class="btn btn-info my-2 my-sm-0" type="submit">Login</button>
</form>
</nav>
<div class="jumbotron">
<h1 class="display-4">My Awesome App</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<div id="formAlign">
<div class="form-horizontal">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-0 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
<a class="btn btn-primary btn-md ml-2" href="#" role="button">Sign Up</a>
</div>
</div>
</div>
</div>
<div class="container" id="appsum">
<div class="row">
<h1>Why this is so awesome.</h1>
</div>
<div class="row">
<p class="lead">Summary, once again, of your app's awesomeness</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
</body>