I am trying to position elements within a navbar and I’m struggling to understand why my attempts are failing (I’m new to web development).
I have used the default Bootstrap
Navbar component that Bootstrap Studio provides and have gone through and copied over the CSS blocks of the navbar into my own stylesheet to override the default Bootstrap CSS code blocks the navbar has (style-wise, everything is looking how I want it).
I am now trying to achieve perfect positioning of my elements within the navbar. The navbar contains a brand logo, nav (with multiple links), and finally a button. I would like to have the brand logo on the left of the navbar, my nav (with links) in the absolute center of my navbar, and the button on the right of my navbar. I have tried amending the
.navbar class within my CSS stylesheet (which the parent
Navbar element is assigned) but none of my elements seem to be moving at all, no matter what I try.
As you can see in the above image the 3 components of my navbar are all nudged on the left. According to the CSS code block for the
.navbar class there is two attributes set in the CSS code block that I thought would have spaced the elements out within the navbar (mainly
justify-content: space-around). No matter what I change in the
.navbar class none of my elements (which are children of the
Navbar component) move.
I’m not sure if I am missing something here.