# Why is the following CSS code not centering my button horizontally within a div element?

**URL:** <https://discourse.slimframework.com/t/why-is-the-following-css-code-not-centering-my-button-horizontally-within-a-div-element/5670>\
**Category:** Questions\
**Created:** [August 18, 2023, 8:52am UTC](https://discourse.slimframework.com/t/why-is-the-following-css-code-not-centering-my-button-horizontally-within-a-div-element/5670 "2023-08-18T08:52:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Techi11](https://avatars.discourse-cdn.com/v4/letter/t/a9adbd/32.png) [@Techi11](https://discourse.slimframework.com/u/Techi11)\
**Post date:** [August 18, 2023, 8:52am UTC](https://discourse.slimframework.com/t/why-is-the-following-css-code-not-centering-my-button-horizontally-within-a-div-element/5670/1 "2023-08-18T08:52:22Z")

</div>

Why is the following CSS code not centering my button horizontally within a div element? It appears off-center in my webpage:

```auto
<!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>

```

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?

---

<div class="post-metadata">

**Author:** ![john](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.slimframework.com/john/32/1553_2.png) [@john](https://discourse.slimframework.com/u/john)\
**Post date:** [August 22, 2023, 10:11pm UTC](https://discourse.slimframework.com/t/why-is-the-following-css-code-not-centering-my-button-horizontally-within-a-div-element/5670/2 "2023-08-22T22:11:35Z")

</div>

Are you still having this issue? I’ve checked your code in Chrome and Safari on MacOS and it looks like it’s centering fine:

 ![Screenshot 2023-08-22 at 6.10.21 PM](https://canada1.discourse-cdn.com/flex030/uploads/slimframework/original/2X/b/b798dd5abfc4be89245e2b6eaf3e8aaa87f34a3f.jpeg)

Have a look and mess with it here if you like: [https://codepen.io/jwp/pen/mdaJPOJ](https://codepen.io/jwp/pen/mdaJPOJ)

Do you have any browser extensions/plugins that could be altering the layout? Posting some screenshots of your inspector in dev tools may help.