Check out my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<center class="container" style="margin:auto; background-color:black;">
<img src=test + "0" id=image style="width:900px; height:900px;"><br/>
<form class="form-inline" style="text-align:center;background-color:red;">
<label id="out">wait...</label>
<select class="form-control" style="width:111px;" id="sel1">
<option>flags 1</option>
<option>flags 2</option>
<option>people 1</option>
<option>people 2</option>
<option>people 3</option>
</select>
<div class="btn-group">
<button class="btn btn-outline-success" type="button" onclick='clearInterval(player);document.getElementById("image").src = "counter.gif";setTimeout(function(){ start(); },5000)'>play</button>
<button class="btn btn-outline-danger" type="button" onclick='clearInterval(player);document.getElementById("result").innerHTML = new Date().getTime() - timestamp'>stop</button>
</div>
<input class="form-control" type="number" id="delay" style="width:80px;">ms</input>
<label id='result'></label>
</form>
</center>
</body>
</html>Even though I've applied text-align:center to the form tag, it's not aligning as expected. What can I do to center my form on the page?
What could be causing my code to behave differently than anticipated?