HTML/CSS Bring the navbar text to the center of the screen in CSS

AI Thread Summary
To center the navigation bar from "Home" to "Contact" on the webpage, the suggestion is to use CSS flexbox properties. Specifically, applying `display: flex` and `justify-content: center` is recommended, but it may require adjustments to existing CSS rules. The proposed changes include modifying the class from `margin-left: 25%` to `mx-auto`, which centers the navbar items effectively. This adjustment aligns with the desired layout seen in the reference website. Identifying the CSS rules that facilitate this centering involves focusing on the flexbox properties and ensuring the correct class names are applied to achieve the intended design.
shivajikobardan
Messages
637
Reaction score
54
TL;DR Summary
Bring navbar at center CSS
https://demo.w3layouts.com/demos_ne...a-liberty-demo_Free/2002651968/web/index.html

This is the website that I am trying to build.

This is my current navbar.
fJLX3O3apC1PU0tIIH_EzdnGbwUqeLO7jmg5P_T2pLgmUUVb1Q.png


This is what I want to build.
wN-ub_JJv8XmNqoUbNsD4eCY6JQKuQ-EB2rZ-PJy94XDB9yulA.png

My focus is on "Home" to "Contact". I want to put it at the center of the page like in the second one. My guess was to do display:flex justify-content: center. But it didn't work.
Please guide me how to make it work?

Here's the codepen.
 
Technology news on Phys.org
Increase the value here:
CSS:
.collapse {
  margin-left: 25%;
}

Or, better, remove the previous value and modify the following:
HTML:
<ul class="navbar-nav me-auto  ">
to:
HTML:
<ul class="navbar-nav mx-auto  ">

(That is how it is done in your link)

Can you identify what CSS rules change in this process?
 
Dear Peeps I have posted a few questions about programing on this sectio of the PF forum. I want to ask you veterans how you folks learn program in assembly and about computer architecture for the x86 family. In addition to finish learning C, I am also reading the book From bits to Gates to C and Beyond. In the book, it uses the mini LC3 assembly language. I also have books on assembly programming and computer architecture. The few famous ones i have are Computer Organization and...
hi; i purchased 3 of these, AZDelivery 3 x AZ-MEGA2560-Board Bundle with Prototype Shield and each is reporting the error message below. I have triple checked every aspect of the set up and all seems in order, cable devices port, board reburn bootloader et al . I have substituted an arduino uno and it works fine; could you help please Thanks Martyn 'avrdude: ser_open(): can't set com-state for "\\.\COM3"avrdude: ser_drain(): read error: The handle is invalid.avrdude: ser_send(): write...

Similar threads

Replies
5
Views
2K
Replies
5
Views
2K
Replies
9
Views
2K
Replies
2
Views
2K
Replies
2
Views
1K
Replies
3
Views
2K
Replies
3
Views
2K
Replies
3
Views
3K
Replies
2
Views
2K
Back
Top