Frontend>Questions

CSS Flexbox Alignment Issue: Items Not Centering Horizontally

harwind

harwind

CSS Flexbox Alignment Issue: Items Not Centering Horizontally

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:

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

/* 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!

View thread on forum
#question
1 576 0

Where Next?

View thread on forum
question
Home Frontend>Questions
#question
1 576 0
Last post

Popular Frontend topics Top

pillaiindu
Frontend>Questions

Which software do you recommend for creating animated diagrams?
Some days ago I came across a video teaching the internals of git. It had some nice diagrams and animations. The diagrams looked like han...
#presentation#slides#diagrams
5 1261 2
New
dyowee
Frontend>Questions

Why or when should one choose Tailwind over Bootstrap?
Why or when should one choose Tailwind over Bootstrap? :slight_smile:
#bootstrap/tailwind
2 1398 0
New
davearonson
Frontend>Questions

Test coverage of plain JS, preferably w/o npm?
I’m unit-testing some JS, with Jasmine, and I’d like to check our coverage. We’re not using any front-end framework, nor much JS, so no ...
#ruby-but-not-rails
6 1653 2
New
AlessandroDsgroup
Frontend>Questions

401 error connecting to the websocket with livekit
Hi to everyone, we are experiencing a 401 error related to the connection of the websocket (in reference to our web app); we are unable ...
#video#video-streaming#livekit
1 1668 0
New
Fl4m3Ph03n1x
Frontend>Questions

Phoenix 1.7 welcome page assets not showing properly
Background I have a a fresh umbrella project with a Phoenix app inside. To create the app I used the following commands: mix new test_a...
/elixir/phoenix
3 763 1
New
Fl4m3Ph03n1x
Frontend>Questions

How to get app.html.heex to use assigns properly with LiveView
Background I have a Phoenix application, where all pages (expect the login page) have a menu at the top. This menu will therefore only a...
/elixir/phoenix#liveview
2 948 1
New
Fl4m3Ph03n1x
Frontend>Questions

Cannot launch Elixir Desktop app when MIX_ENV=test
Background I have Phoenix umbrella application. When inside said application, I can run it without issues if MIX_ENV=prod. However, if I ...
/elixir/phoenix#desktop#liveview
2 726 1
New
PickyBiker
Frontend>Questions

Recommended toolset for targeting IOS and Android?
I have done small amounts of programming for IOS and for Android, but now I need to create something that works with both. What are the ...
#ios-development
19 855 15
New
avipal
Frontend>Questions

Need help on deploying APK into google playstore, with multiple versions with same package name
I have an application where it is three layer 1st layer- A legacy core routines 2nd layer- built on top of the Core routine using Dotno...
#apk
1 441 0
New
Arpeggio
Frontend>Questions

Hiding last divider on each row of buttons
I have the following HTML structure, which is dynamically rendered from a Sightly (HTL) page in a new AEM component we’re building, so I ...
#css
2 397 1
New

Other popular topics Top

Devtalk
General Dev>Dev Chat

What dev-related stuff have you been up to?
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
#community
1037 19435 386
New
brentjanderson
General Dev>Hardware

Moonlander Keyboard (Mechanical) (Ergonomic) (Split) (Ortholinear)
Bought the Moonlander mechanical keyboard. Cherry Brown MX switches. Arms and wrists have been hurting enough that it’s time I did someth...
#hardware/keyboards#moonlander#mechanical-keyboards#ortholinear#ergonomic
212 16447 90
New
Rainer
Community>Journals

Programming Erlang Book Club
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
/erlang/book-programming-erlang-2nd-edition#book-club
195 6634 95
New
AstonJ
General Dev>Hardware

Seen any cool new keyboards?
We have a thread about the keyboards we have, but what about nice keyboards we come across that we want? If you have seen any that look n...
/keyboards#mechanical-keyboards
49 5587 39
New
DevotionGeo
General Dev>Dev Chat

The V Programming Language
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
#programminguages/v
21 12589 7
New
mafinar
Community>Journals

Programming Crystal Book Club
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
/crystal/book-programming-crystal#book-club
155 4581 65
New
AstonJ
Data Science

Can AI/ML predict a lottery win?
Biggest jackpot ever apparently! :upside_down_face: I don’t (usually) gamble/play the lottery, but working on a program to predict the...
#ai#machine-learning
19 3496 10
New
PragmaticBookshelf
Backend>Learning Resources

Agile Web Development with Rails 7
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
pragprog.com
#pragprog#web-development/ruby/rails#published-book/book-agile-web-development-with-rails-7
32 5327 9
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Erin Dees (Author) Interview and AMA!
Author Spotlight Erin Dees @undees Welcome to our new author spotlight! We had the pleasure of chatting with Erin Dees, co-author of ...
#author-spotlight/ruby/rails/book-effective-testing-with-rspec-3/book-seven-more-languages-in-seven-weeks/book-cucumber-recipes#rspec
24 3863 11
New
NewsBot
Backend>Official News

Node.js v22.14.0 released!
Node.js v22.14.0 has been released. Link: Release 2025-02-11, Version 22.14.0 'Jod' (LTS), @aduh95 · nodejs/node · GitHub
github.com
/nodejs#official-news
0 2585 0
New
Back to top

Sponsor Spotlight

Manning

Develop your skills with books, videos, and courses.

Frontend>Questions

Frontend Questions ❯

Latest on Devtalk

Devtalk ❯

We ❤️ helpful members!

We reward our most helpful members via our MOTM scheme - by giving away a whopping 25 books per year!

Member of the Month

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Manning Publications

Develop your skills with books, videos, and courses.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Popular Portals

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Manning Publications

Develop your skills with books, videos, and courses.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement See our Roadmap