Empty space to the left of the vertical navigation bar

I'm struggling to get rid of the white space on the left side of my vertical navigation bar.

I've attempted setting padding-left to 0 on my main navigation bar.

This is my first time creating a navigation bar, so if you notice any semantic issues in my code, please do let me know.

Thank you!

Below is the HTML code snippet:

<title>Mockup of Zopim</title>
<body>
    <main>
        <nav class = "side-bar">
            <ul class ="main-bar">
                <li class="user-nav"><a class ="big-box" href="#">User</a></li>
                <li class="main-nav"><a href="#">Home</a></li>
                <li class="main-nav"><a href="#">Visitor List</a></li>
                <li class="main-nav"><a href="#">Visualization</a></li>
                <li class="main-nav"><a href="#">History</a></li>
                <li class="divider-nav"><a href="#">Manage</a></li>
                <li class="manage-nav"><a href="#">Agents</a></li>
                <li class="manage-nav"><a href="#">Departments</a></li>
                <li class="manage-nav"><a href="#">Shortcuts</a></li>
                <li class="manage-nav"><a href="#">Banned Visitors</a></li>
                <li class="manage-nav"><a href="#">Triggers</a></li>
                <li class="divider-nav"><a href="#">Settings</a></li>
                <li class="settings-nav"><a href="#">Widgets</a></li>
                <li class="settings-nav"><a href="#">Personal</a></li>
                <li class="settings-nav"><a href="#">Accounts</a></li>
            </ul>
       </nav>
       <article>
        <header>
            <h1>Hello!</h1>
        </header>
       </article>
    </main>
</body>

This is the CSS code snippet:

@charset "utf-8";
/* CSS Document */
body {
    background-color: black;
}
main {
    width: 100%;
}
.side-bar {
    width: 15%;
    height: 100%;
    background-color: #585858;
    position: relative;
    float: left;
}
nav li {
    list-style: none;
}
.main-bar {
    padding-left: 0px;
}
.main-bar li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 2.5em;
    text-decoration: none;
    color: white;
    text-align: center;
}
article {
    width: 60%;
    height: 30%;
    float: right;
    position: relative; 
}
a.big-box {
    display: block;
    line-height: 7em;
}
header h1 {
    color: white;
}

Here's the JSfiddle link for more context:

http://jsfiddle.net/codermax/fe0L3d08/

Answer №1

Each Web browser is equipped with its own default settings for margins and padding. To tackle this issue effectively, it is recommended to reset all margin and padding values.

*{
    margin:0;
    padding:0;
}

or 
html,body {
    margin:0;
    padding:0;
}

Additionally, resetting your CSS can greatly benefit you. Consider using a resource like:

Answer №2

To ensure consistency across various browsers, it is recommended to utilize a reset.css file. I have made adjustments to your code sample by setting the body margin and padding to 0.

body {
    margin:0;
    padding:0;
}

http://jsfiddle.net/abc123xyz/2/

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

The seamless flow of web design

Seeking guidance on creating a responsive web page. I have a functional website that looks great on my 13" MacBook, but encounters distortion at different screen sizes. What steps are necessary to ensure it appears crisp and appealing on any device? Should ...

The alignment of two elements is off in mobile display

Why aren't my two divs centered in mobile view? I am using Vuetify CSS flex helper justify-center to try and achieve it, but it doesn't seem to be working. Even when I use justify-sm-center, it still doesn't work. What am I missing? <v-co ...

Designing a Dynamic Floating Element that Shifts with Scroll Movement

Hey there everyone!, I am currently working on a project in Wordpress and I was wondering if anyone has experience creating a floating widget that moves along with the page as you scroll. Any suggestions on how to achieve this? Would it involve using Javas ...

Aligning the <div> list to the center of the webpage

Is there a way to center this list element on the page? It consists of three boxes that are all the same size, and I want them to always remain in the middle. body { width: 100%; } .boxes { display: block; margin: 0 auto; } .box-container ...

Vue.js is not incrementing the counter as expected

I've encountered an issue with a button that has a click event to increment data value by 5, but instead of adding 5 it is appended by 5. Click here for the code example <div id="react"> <button @click='counter += 5'>Increment& ...

Improved efficiency in CSS for left transition animations

Here is the current code I am using: .s2 { top: 150px; left: 20px; position: absolute; transition: left 300ms linear; } I am currently updating the left position dynamically using JavaScript based on scroll events. However, I have noticed that th ...

Position the image, text, and header within a box in uniform alignment

Currently, I am working on a design that includes an image, a header, and some text inside a box. However, I am facing an issue with aligning the header so that it appears above the rest of the text. The layout is not turning out as expected. https://i.ss ...

Is it possible to create a pure CSS responsive square that is positioned to the top right of a div element of any size?

My current goal is to achieve the following task... I aim to position a square perfectly in one or both corners of the top right section of a div, ensuring it never exceeds the boundaries regardless of the div's size or dimensions that necessitate th ...

Unconventional choice for website navigation bar

I'm encountering an issue with my navigation bar. I have implemented a script to fix its position at the top of the site, but the base position for the navigation bar is not at the top by default. To workaround this, I made it jump to the top when the ...

The content of my menu is concealed within a DIV. It may remain hidden or malfunction

I am in the process of creating master pages. In one of the master pages, I have implemented a dropdown menu using jQuery and CSS. While it works perfectly fine on some pages, it seems to be hidden on others that contain a div element. This is because the ...

Fixing inconsistent font sizes across various browsers

During the development of my website, I couldn't help but notice a significant variance in font sizes between Internet Explorer and other browsers. Here's an example of what my page looks like: I intended for it to resemble the first and second ...

Extract time value from html datetimepicker input

Recently, I've been utilizing a datetime_picker that I found on the web to create a value for an html text input. However, I encountered a problem in separating the value into distinct date and time components. When using the date_picker, the TEXT inp ...

Display an image from a Google image search when hovering over a specified data attribute

My goal is to add a code snippet that will assign a class of "hoverme" to a table cell. When a user hovers over that cell, an ajax query will be triggered using the data attribute containing information stored there to perform a Google search. Below is a ...

Options for regular expressions in CSS: match letters regardless of case and search for all occurrences

Here is the HTML I am working with: <div> <img class="hi" src="http://i.imgur.com/f9WGFLj.png"></img> <img class="HI" src="http://i.imgur.com/f9WGFLj.png"></img> </div> Additionally, I have the following CSS co ...

Fill in input field based on choice from the drop-down menu - JavaScript

I am facing an issue where I cannot add text inside the text box based on the dropdown selection. For example, if I select option2 from the dropdown, the textbox should be populated with option2. (function() { 'use strict'; setInterva ...

Determining the file path in HTML5

Can anyone help me with retrieving the file path using html5 javascript once a user selects a file? I require the file path for a specific scenario: In this case, the user uploads a file and pauses it (currently only supported by Mozilla browsers), then c ...

Display of content visible via stationary div

Recently, I successfully implemented a fixed div that remains at the top of my webpage. However, I encountered an issue where text would appear through the div when scrolling. You can witness this phenomenon by visiting this site and simply scrolling down ...

How can I generate a checkbox in a database with a field that allows for enabling and disabling?

I am looking to design a table that includes questions, checkboxes, and text boxes. All the questions are stored in a database and called through an array. In addition, I want to create disabled textboxes that become enabled when their corresponding checkb ...

Issue with Image Quality in Woocommerce/Wordpress Products

I'm experiencing an issue with either Wordpress or Woocommerce. Yesterday, I updated Woocommerce while installing a new theme. Unfortunately, I'm facing a problem now where I can't seem to improve the image quality on the product page. Jus ...

Personalizing a class specifically for error messages within the jQuery Validation plugin

When using the jQuery Validate plugin, is it possible to set a separate class for the error message element without affecting the input element's class? ...