Element in list does not cover entire ul

I'm having trouble getting my list elements to span the entire width of the unordered list. I've tried applying styles to the nav ul li and setting the width to 100%, but nothing seems to work. How can I achieve this?

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.nav {
  text-align: justify;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav ul {
  border: 1px solid red;
  width: 100%;
  padding: 0px;
}

.nav ul li {
  margin-left: 5px;
  list-style-type: none;
  height: 25px;
}

.nav ul li a {
  text-align: left;
  padding: 5px;
  color: #333;
  text-decoration: none;
  margin-left: 15px;
}

.nav li:hover a {
  color: #f4f3f3;
}


/* QUERIES */

@media screen and (max-width: 540px) {
  .nav-container {
    width: 100%;
    height: 100px;
    background-color: #f4f3f3;
    border-bottom: 0.5px solid #f4f3f3;
  }
  .nav-link {
    padding: 10px;
  }
  .logo-holder {
    overflow: hidden;
    display: block;
    margin: auto;
    width: 40%;
  }
  .nav-container nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logo-holder {
    text-align: left;
  }
  #navigation-div {
    background-color: #f4f3f3;
    margin-top: 0;
  }
  .hide {
    display: none;
  }
  .nav ul li {}
}
<div class="nav-container">
  <div class="logo-holder">
    <img class="user-select-none" src="test.jpeg" width="150px" height="150px" alt="temp" />
  </div>
  <div id="navigation-div">
    <nav class="nav">
      <ul class="nav-ul">
        <li><a class="nav-link active" href="">Test 1</a></li>
        <li><a class="nav-link " href="">Test 2</a></li>
        <li><a class="nav-link" href="">Test 3</a></li>
      </ul>
    </nav>
  </div>
</div>

Note: You can see that hovering over the empty space next to the links changes their color to white.

Edit: I forgot to mention that my vertical nav bar transitions into a horizontal navbar when the screen size changes. I have updated the code accordingly.

Answer №1

To fix the layout, you should eliminate the left margin from the li and .nav-link elements:

.nav ul li,
.nav-link {
  margin-left: 0;
}

Keep in mind that you are removing the margin on .nav-link initially:

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

However, you are reapplying it later on:

.nav-link {
  text-align: left;
  padding: 5px;
  color: #333;
  text-decoration: none;
  margin-left: 15px;
}

If you are having trouble with styling, try using the developer console in Chrome. Select your element, switch to the "computed" tab in the "styles" section, and you'll see exactly which styles are affecting your element. This can help you track down conflicting style declarations and troubleshoot more effectively when dealing with multiple styles on the same element. :)

Answer №2

The problem you are experiencing is due to the margin-left: 15px that is applied to .nav-link. To resolve this issue, you can simply change it to a padding-left and remove the margin-left on .nav li ul. You can view an example in this fiddle: https://jsfiddle.net/f2fc0r1q/

Answer №3

To simplify things, just adjust the .nav-link and .nav ul li elements by changing the margin-left value. If you remove it or set it to 0, you will achieve the desired display.

.nav-container {
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
  background-color: #f4f3f3;
}

.nav {
  text-align: justify;
}

.nav-link {
  display: block;
  text-align: left;
  color: #333;
  text-decoration: none;
  margin-left: 0px;
  padding-left: 15px;
}

.nav ul {
  border: 1px solid red;
  width: 100%;
  padding: 0px;
}

.nav ul li {
  width: 100%;
  margin-left: 0;
  list-style-type: none;
  height: 25px;
}

.nav-link {
  text-align: left;
  padding: 5px;
  color: #333;
  text-decoration: none;
  margin-left: 0;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}

.nav li:hover a {
  color: #f4f3f3;
}
<div class="nav-container">
  <div id="navigation-div">
    <nav class="nav">
      <ul>
        <li><a class="nav-link active" href="">Test 1</a></li>
        <li><a class="nav-link " href="">Test 2</a></li>
        <li><a class="nav-link" href="">Test 3</a></li>
      </ul>
    </nav>
  </div>
</div>

Answer №4

Your code is almost there, just a few adjustments required.

.navigation-container {
  background-color: #f4f3f3;
  border-right: 1px solid #E4E2E2;
  height: 100%;
  width: 200px;
}

.nav-bar {
  text-align: justify;
}

.nav-bar ul {
  box-sizing: border-box;
  border: 1px solid red;
  width: 100%;
  padding: 0;
}

.nav-bar li {
  box-sizing: border-box;
  width: 100%;
  list-style-type: none;
  height: 25px;
}

.nav-link {
  box-sizing: border-box;
  display: block;
  height: 100%;
  width: 100%;
  text-align: left;
  color: #333;
  text-decoration: none;
  padding: 5px 5px 5px 15px;
  line-height: 15px;
}

.nav-link:hover {
  background-color: #333;
  color: #f4f3f3;
}
<div class="navigation-container">
  <div id="nav-bar-container">
    <nav class="nav-bar">
      <ul>
        <li><a class="nav-link active" href="">Test 1</a></li>
        <li><a class="nav-link " href="">Test 2</a></li>
        <li><a class="nav-link" href="">Test 3</a></li>
      </ul>
    </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

Detecting collisions on a tile map using only JavaScript

Currently, I am developing a tile-based game using a traditional method (utilizing two for loops) and struggling with writing collision detection. I want the blue square to remain on the screen and appear on top of the tiles once the start button is clicke ...

Placing a user's username within an ejs template using express and node.js

Currently, I am attempting to integrate the username into a layout using ejs templating with node and express. Below are the steps I have taken: Mongodb model: const mongoose = require('mongoose') const Schema = mongoose.Schema; var uniqueValid ...

What causes JavaScript image to stop loading while displaying a prompt dialog?

I have nearly finished my project. I will include a codepen link at the end of the post for debugging purposes. What Should Happen? The img element has an id property of dragon, and the image specified in the src attribute should be pre-loaded as the defa ...

How to retrieve data from a JavaScript array in a separate JavaScript file

In my checklistRequest.js file, I populate an array and then try to access it in my Termine_1s.html file, which includes JavaScript code. Although I can access the array, when I attempt to iterate through it, only single digits are returned instead of stri ...

Ensuring Navigation Elements Remain Aligned in a Single Line

I'm in the process of developing an interactive project that will be showcased on a touch screen. One of its key features is a fixed footer navigation. Currently, I am using floats to position the main navigation elements and within each element, ther ...

Arrange the elements within the anchor tag in a vertical line using Angular Material

Is there a way to style the elements within an anchor tag in Angular Material so that they display in a single line? I am looking for the CSS solution to achieve this outcome. This is my current HTML code: <a mat-list-item [routerLink]="['das ...

HTML tags are permitted in the contact form 7 area

Is there a way to include a contact form 7 shortcode in an HTML area that only allows HTML tags? [contact-form-7 id="2358" title="Contact Form 1"] I am trying to incorporate the 3rd slide on my website from this URL: ...

Retrieve the value of data from the dataset

I'm facing an issue assigning a string value to a variable depending on a boolean variable. After trying the following code: [Vue warn]: Error in data(): "TypeError: Cannot read property 'check' of undefined" TypeError: Cannot read proper ...

Is there a way to stop Bootstrap from automatically bolding the font?

When testing this simple example without the bootstrap link, everything seems to be working correctly: Hovering over any word changes its color to red, and when hovering away it returns to black. But as soon as the bootstrap link is included, the text bec ...

When hovering over individual links within a set of blocks, ensure that the other links are not affected or disrupted

I need help creating a forum category link guide. Similar to this example... Specifically, I want it to display as Forums > The Financial Roadmap Two issues I am facing are: when hovering over the link, it shifts down one row and how can I add blocks ...

Customize your Bootstrap hamburger menu with a unique open and close button design

Currently, I am in the process of creating a hamburger menu with Bootstrap and I have managed to customize the open and close buttons according to my preferences. However, I am facing an issue where the hamburger icon is not displaying properly. See the c ...

Is it possible to execute JavaScript within an Android application?

Is there a way to utilize the javascript provided by a website on an Android device to extract and analyze the emitted information? Here is the javascript code: <script type="text/javascript" src="http://pulllist.comixology.com/js/pulllist/5b467b28e73 ...

Error encountered during Nuxt build: Syntax error on Line 1 of the SCSS component file

I'm currently working on a project in node 18.7.0 that utilizes nuxt 2.15.8. Within my Vue component, I have the following SCSS code: <style lang="scss"> .Accordion { --Accordion__margin-top: 2.5rem; &__items { margin ...

Generate a unique token through a personalized form

**HTML** <div ref="addCardForm" id="card-element"> <div class="card_digit_text">Credit Card Number <input type="text" id="cardDigit" name="email" placeholder="0000 0000 0000 0000"> </div> ...

A guide to automatically playing audio on a webpage using HTML and JavaScript

I'm currently in the process of developing a quiz application, and my goal is to have a sound play when a user enters the webpage to initiate the quiz. Initially, I attempted to use JavaScript to trigger the sound on page load, but unfortunately, the ...

Jquery submenu accordion toggles open and closed with each click

My website has a hamburger menu with an accordion-style submenu implemented using jQuery for devices 1084px and smaller. For larger devices, the menu utilizes a hover-style submenu on desktop. However, I encountered issues when trying to use both the hove ...

What is the method for updating the form action to alter the hash without causing a page reload?

My website is designed to show dynamic data based on the information following the '#' in the URL. Surprisingly, when I manually change this value in the URL, the page doesn't reload. However, if I modify it within a form on the site, the we ...

Tips for altering the scrolling rate of a container

I am trying to adjust the scroll speed of specific divs among a group of 5 divs. I came across a solution that changes the scroll speed for the entire document: http://jsfiddle.net/36dp03ur/ However, what I really need is a scenario like this: <div i ...

Length of borders at the bottom of `td` elements in tables

I have been searching everywhere for a solution and just can't seem to figure it out. I am trying to adjust the length of the bottom border for td elements within a table. I have attached two screenshots for reference. Any assistance would be greatly ...

Display a notification to the user prior to reloading the page

I have created a code for logging attendance at work using a barcode reader. The user simply needs to scan their card with a barcode to register their attendance. let $scannerInput = $(".scanner-input"); $(document).ready(function(){ $scannerInput.focu ...