Formatting list items in HTML

I have just finished coding the following HTML code:
My main goal is to align the list items - 

HOME | All About Kittens | Feeding Your Kitten

in a proper layout. Currently, they are displayed as a simple list. However, I would like them to be aligned horizontally like this:
https://i.sstatic.net/3I3Zm.png
In this example, the list items are Home, Shop, and collections arranged in a horizontal line.
Additionally, when hovering over an item, it should change color, and a line should appear below it.
Do you have any ideas on how I can achieve this layout using CSS? 

a {
  color: black;
  text-decoration: none;
}
.promo_banner {
  background-color: #333;
  text-align: center;
  color: #fff;
  font-size: 12px;
  position: relative;
  width: 100%;
  z-index: 5000;
  top: 0;
  overflow: hidden;
}
div.logo img {
  max-width: 205px;
  width: 100%;
  margin: 0 auto;
  display: block;
  max-width: 100%;
  height: auto;
}
<html>
  <head>
    <link rel="stylesheet" href="home.css" />
  </head>
  <div class="promo_banner">
    <div class="promo_banner__content">
      <p>
        <strong>Our Guide on Caring for Your Furry Feline Friend</strong>
      </p>
    </div>
    <div class="promo_banner-close"></div>
  </div>
  <div class="top_bar clearfix">
    <ul class="social_icons">
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
      />

      <div class="container">
        <span><a href="https://www.twitter.com"><i class="fab fa-twitter"></i><a href="https://www.twitter.com"></a></span>
        <span><i class="fab fa-facebook-f"></i></span>
        <span><i class="fab fa-youtube"></i></span>
        <span><i class="fab fa-instagram"></i></span>
      </div>
    </ul>
  </div>

  <div class="logo text-align--center">
    <a href="https://store.linefriends.com" title="LINE FRIENDS INC">
      <img
        src="logo.jpeg"
        class="primary_logo lazyloaded"
        alt="LINE FRIENDS INC"
    /></a>
  </div>
  <div class="nav">
    <ul class="menu center">
      <li >
      <span>HOME</span>
       </li>  
       <li >
        <span>All About Kittens</span>
         </li>  
         <li >
          <span>Feeding Your Kitten</span>
           </li>  
      </ul>
    </ul>
  </div>
</html>
This is the logo.jpeg file that I am utilizing within the HTML. I aim to achieve an appearance similar to how the image line items are centered like this:
https://i.sstatic.net/MhrhV.png https://i.sstatic.net/DYE9P.jpg

htmlcss

Answer №2

These two CSS properties will solve the issue.
display: flex;
justify-content: center;

To resolve the issue, apply these classes and remove the background color from .nav .menu

.nav .menu{
  display: flex;
  gap: 1rem;
  list-style: none;
}

.nav{
  display: flex;
  justify-content: center;
}
  
.nav_wrapper {
  background: #f1f1f1;
}

Don't forget to enclose your 

<div class="nav"></div>
within another div with the class nav_wrapper

<div class="nav_wrapper">
  <div class="nav">


  </div>
</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

none of the statements within the JavaScript function are being executed

Here is the code for a function called EVOLVE1: function EVOLVE1() { if(ATP >= evolveCost) { display('Your cell now has the ability to divide.'); display('Each new cell provides more ATP per respiration.'); ATP = ATP ...

javascripthtmlcssfunction

Adjust the height of a div containing variable elements

I'm having trouble adjusting the height of a div so that it can be scrolled all the way through. This div is positioned next to another one, so I set the overflow-y to scroll. Initially, I thought setting the height to auto would solve the issue, but ...

javascripthtmlcssscroll

Image in an Outlook email surrounded by padding and enclosed in a paragraph

I am facing an issue with my email signature setup in Outlook Live where there is a white space below the image. After trying to add vertical-align:bottom to the CSS, it seems that Outlook Live does not accept it. The code for my HTML in Outlook 20xx is a ...

htmlcssoutlook

I am experiencing issues with Google Fonts not functioning properly when I insert the bootstrap CDN

I have encountered an issue while working on my landing page. I am using Google fonts for the design and trying to integrate Bootstrap as well. However, whenever I add the Bootstrap link, all the font styles stop working. I have checked the order of the CS ...

htmlcssbootstrap-5

Storing the closed state of a pop-up box in localStorage for future reference

I'm struggling to get localStorage working properly on my website (). Here's what I need to achieve: A newsletter subscription pop-up on every page - this part is functioning correctly An option for users to click 'X' to close the po ...

javascriptjqueryhtmlcss

Bootstrap is having trouble properly organizing the columns within the row

I am facing a challenge with arranging three columns in a row: Interested listings | Basic profile | Connections However, when the screen size is reduced to that of a phone, they should be stacked like this: Basic profile Interested listings ...

htmlbootstrap-4

How come my keyframes animation isn't functioning properly on my div element?

I am currently designing a custom animation for a checkers game. My goal is to create an effect where the checker piece moves slowly to its next spot on the board. Below is the CSS code I have used: @keyframes animateCheckerPiece { 0% {top: ...

javascriptjqueryhtmlcssdom

Styles in NEXT.js are not loading properly due to issues with the Module

I have been attempting to apply module.css to one of my components by following the instructions provided in this tutorial https://nextjs.org/learn/basics/assets-metadata-css/layout-component. /*/components/Livestream/App.js*/ import styles from './A ...

javascriptcssreactjssassnext.js

Unleashing the power of jQuery, utilizing .getJSON and escaping

When I use .getJSON, the response I get is a JSON string with many \" characters. However, the callback function does not fire when the page is launched in Chrome. I have read that this happens because the JSON string is not validated as JSON (even th ...

javascriptjqueryhtmlajaxjson

When attempting to render HTML containing multiple CSS classes within a JSON request parameter, the styles are not being applied as expected

In my API, I'm dealing with a JSON request parameter that includes an HTML string. This HTML string references CSS styles from a separate .css file. However, when an HTML element has two CSS classes assigned to it, neither of the classes' styles ...

ioscssjsonswifthtml-email

Tips for transforming an SQL Server query into JSON format

I need to construct a table in a view utilizing the output of this particular SQL Query SELECT f.empresaid, e.fantasia AS Company, f.filialid, f.fantasia AS Branch, u.consultorid ...

htmljsonsql-serverasp.net-mvcview

What is the best way to trigger one of two different functions randomly when an HTML button is clicked?

Is there a way to have an HTML button trigger one of two functions randomly on click event? I’m utilizing PHP on the server side and jQuery on the client side. I've tried using the following code but nothing happens when I click the button image... ...

phpjqueryhtmlbuttonrandom

Duplicate the image from a specific div to another div, ensuring that only one clone is created

I'm trying to replicate an image in multiple spots within a frame, but I can only manage to get one instead of many. Can someone please tell me what I'm doing wrong? I am creating a map of terrain where I need to clone images from one div to anot ...

javascriptjqueryhtml

Having difficulty rendering the data from a JSON table object using angularjs

I am attempting to showcase my data in an HTML <div> using AngularJS. Here is the code snippet I am using: <pre> {{otherResponse.confirmation | json}} </pre> While I am able to view all my JSON data in the <pre> element, I a ...

htmlangularjsjsonexpress

What is the process for activating a script file once I have replaced HTML content using a backend method?

After receiving HTML content from the backend, including the <script> tags, I noticed that the scripts.js file does not seem to be activated. While the HTML content displays fine, changing the path to style.css successfully alters the appearance of ...

javascripthtmlasp.net-mvc

Insert a span element before an HTML input using JavaScript

On my webpage, there is an html input inside a div. Here is what it looks like: <input type="text" class="form-control" placeholder="Barcode" role="barcode"> Using JavaScript only, I am trying to add the following code into the DOM above it: <s ...

javascripthtml

Eliminate the div element using jQuery if it contains a line break tag but no text

I am faced with a situation on a page where some div elements contain content while others only have a BR tag. I am attempting to remove the div elements that contain only the BR tag. Below is the HTML format in question: Here is an example of one type: ...

javascriptjqueryhtml

Is there a way to send emails with subject lines containing special characters?

I am facing an issue where, when I send an email with the subject containing "Ç", it displays as "?". I have tried various implementations to fix this such as using -charset="ascii", -charset=UTF-8, and modifying the subject line with different encodings. ...

phphtml

implementing jquery typewriter plug-in for a responsive bootstrap image

I am using Bootstrap and my image response dynamically, but I am having trouble adding text to it. I would like to use a jQuery typewriter plugin for the text on the image, which should resize according to screen size. Here is my HTML code and I have used ...

jqueryhtmlcsstwitter-bootstrap-3jquery-plugins

Using CSS to create animation delays for several div elements sharing the same class

I have a project in progress where I need to load multiple divs with a small animation. However, in the provided fiddle, they all load simultaneously. Is there a way to make them load one after another with a 0.1s delay? http://jsfiddle.net/HaQmN/38/ App ...

cssanimationcss-animations