# CSS Flexbox Alignment Issue: Items Not Centering Horizontally

**URL:** <https://forum.devtalk.com/t/css-flexbox-alignment-issue-items-not-centering-horizontally/122165>\
**Category:** Frontend Questions/Help\
**Tags:** question\
**Created:** [28 August 2023 10:51 UTC](https://forum.devtalk.com/t/css-flexbox-alignment-issue-items-not-centering-horizontally/122165 "2023-08-28T10:51:19Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![harwind](https://forum.devtalk.com/letter_avatar_proxy/v4/letter/h/c77e96/32.png) [@harwind](https://forum.devtalk.com/u/harwind)\
**Post date:** [28 August 2023 10:51 UTC](https://forum.devtalk.com/t/css-flexbox-alignment-issue-items-not-centering-horizontally/122165/1 "2023-08-28T10:51:19Z")

</div>

I’m currently working on a front-end development project and I’m facing an issue with aligning items using CSS Flexbox. I want to horizontally center a set of items within a container using Flexbox, but they don’t seem to be aligning properly. Here’s the relevant HTML and CSS:

```auto
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

```

```auto
/* styles.css */

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    height: 200px;
}

.item {
    padding: 10px 20px;
    background-color: #f0f0f0;
    margin: 5px;
}

```

Despite setting `justify-content: center;` and `align-items: center;` on the `.container`, the items are not aligning at the center of the container horizontally.

Am I missing something in my CSS code, or is there another property I should be using to achieve this alignment? Any help or guidance on how to properly center these items within the container using Flexbox would be greatly appreciated. Thank you in advance for your assistance!