HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options
Why is the following CSS code not centering my button horizontally within a div element?
mark01
New
Why is the following CSS code not centering my button horizontally within a div element? It appears off-center in my webpage:
[code]<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
background-color: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<button class="btn">Click Me</button>
</div>
</body>
</html>
[/code]
The button seems to be slightly towards the left side within the container. What am I missing in the CSS that is preventing the button from being perfectly centered?
0