Different ways to create space between list items

My nav is causing some trouble - the header looks good, but the ul just won't cooperate.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  list-style: none;
  position: relative;
}
<div class="nav">
  <h2>hackeryou</h2>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Bootcamp</li>
      <li>Part-Time</li>
    </ul>
  </nav>
</div>

I want to keep the h2 on the left, but I need everything else on the right to have more spacing.

htmlcssflexboxnavigationbar

Answer №1

Avoid using justify-content: space-between with the nav ul since the entire nav is already aligned to the right. Instead, simply adjust the margin of nav ul li as needed. Take a look at the example below:

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

nav ul li {
  list-style: none;
  position: relative;
  margin: 10px; /* ADJUST THIS */
}
<div class="nav">
  <h2>hackeryou</h2>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Bootcamp</li>
      <li>Part-Time</li>
    </ul>
  </nav>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS z-index property not functioning properly for Flowplayer on Firefox browser

I am attempting to create a layered div using z-index, with one of the layers containing a flowplayer. Once the layer is properly created, I plan to update the div's z-index value based on the logic of the program. The following code functions correct ...

htmlcssflowplayer

Is it possible to horizontally center an auto-fill grid using only CSS?

I would like to fill my page horizontally with as many blocks as possible and center the result. My goal is to have a grid that can resize when the window size changes: wide window xxx small window xx x Is it possible to achieve this without using Java ...

javascripthtmlcsscss-grid

Retrieve all text within a <div> element excluding the content within an <h5> tag using XPath

I have been researching and experimenting with different solutions for the issue at hand, but unfortunately, none of them have proven successful so far. Here is the HTML code that I am working with: <div class="detalhes_colunadados"> <div clas ...

htmlxpathsiblings

JavaScript programming does not rely on using the onclick method to style HTML elements

For a recent project, I was tasked with creating a toggle-style button setup for the challenge on CodePen. To achieve a 3D appearance for the button, I wrote some JavaScript code that utilized the onclick event. var on = true const green = document.getElem ...

javascripthtmlcss

What methods can be used to elevate the height of an HTML textbox?

Is there a way to adjust the height and font size of a textbox? ...

htmltextbox

Is it possible to reference the same PHP file in multiple locations?

Currently, I am working on a web development project where I have created a header.html file to store the common header for all my webpages. This header file is located in the parent directory. Within my header.html file, I have included references to bot ...

phphtmlcss

What could be causing my anchored link to redirect incorrectly?

My navigation bar correctly directs me to the 'work' section, but when I click on ABOUT in the navigation bar, it drops down about 300px above the 'about' h2. I suspect that this issue may be related to positioning and display settings. ...

csshtmlposition

What is the best way to insert a "Read More" link following a short snippet of text

I am looking to implement multiple "read more" links to enable users to continue reading after a specified amount of text, such as 1000 words or 2 paragraphs. <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script&g ...

javascripthtmljquerycss

Tips on eliminating the background of a div nested within another div

<div class="white"> <div class="transparent"> ---- </div> <div class="content"> ---- </div> </div> I am working with a parent div .white that has a white background color. Inside this parent div, there are mul ...

htmlcss

What techniques are most effective for concealing a div container through css?

I attempted to hide the #div element using CSS: #div{ display: hide; } However, the method did not work as expected. ...

css

How to create an HTML hyperlink in CakePHP version 2.2.1 and above?

Is there an easy way to create an HTML link using the HtmlHelper class in CakePHP 2.2.1? Let's say I have a route set up that maps /finest-perfumes-ever-2012 to the Perfumes/Index Controller/Action. I want the generated link to be: somedomain.com/f ...

htmlcakephphyperlinkhtml-helpercakephp-2.2

Ways to access data stored in the browser's local storage

I have a unique reminder app that stores user inputs in local storage and then displays them on a different page within the app. The process of storing these values in local storage is done through this code snippet: <h2 style="text-align:center;margin ...

javascripthtmllocal-storage

Display the HTML tag inside a cell of a mat-table

I am currently exploring options to display an HTML tag within a cell of a mat-table in Angular. My goal is to show a colored circle next to the cell value. I have searched online for solutions, but haven't found one that works. If anyone has any insi ...

htmlangularmaterial-uitagsangular-material-table

Display different images based on user selection in vue.js

I am new to working with vue.js and I'm facing a challenge. My goal is to display images of NBA players based on the selected criteria using vue.js. For instance, if the Dunk contest champion is chosen, only images of Kobe and Jordan should be display ...

javascripthtmlcssvue.js

Using jQuery to retrieve and update information within a table layout

This is the structure of my table. <table> <tr> <td> <input type="text"> 1 </input> </td> </tr> <tr> <td> <input type="text"> 1 </inpu ...

jqueryhtml

JavaScript Reference for the HTML DOM Style's height property and revert back to the initial style height

Hey there! I have a simple fix for those who know JavaScript. I have some code that changes the height style on the first click, but I'm looking for a way to revert back to the original height style on the second click. Here's the code snippet: ...

javascripthtmlcss

Get rid of the inner image border using CSS

Can someone assist me in removing the border inside this image using CSS? The border of the image is problematic. Here is an example: https://i.sstatic.net/dcnpS.jpg Thank you..! ...

imagecss

I possess a pair of UI tabs. Whenever a button located outside the tab is clicked, I am required to activate a distinct tab

As a beginner in Javascript, I recently encountered an issue with a UI tab element that contains two tabs. My goal is to create a button that, when clicked, will scroll up and activate the second tab. <style> .tab-container { overflow-x: ...

javascriptjqueryhtmlcss

Is it considered ineffective to define default CSS rules?

For instance, consider a scenario where there is a table. The conventional alignment practice (whether it's an HTML specification or specific to the browsers in use) appears to be left aligning the body elements and center aligning the head elements. ...

htmlcssperformancecss-selectors

Using jQuery to toggle between two elements and updating the SELECT field

<div class="r_row"> <div class="row field_currency"> <div class="f_row"><label class="" for="currency">Currency</label></div> <div class="r_row"> <select id="currency" name="currency" class=" select ...

javascriptjqueryhtmlcss