CODEWITHSUNDEEP
htmlcss
josephoneill
josephoneill

Reputation: 853

Navigation bar won't entirely fill screen width

I've started making a navigation bar using the nav tag, which worked perfectly. Using CSS, I set the width of my nav tag to 100%, as well as the border and padding set to 0.

I seem to have a few pixels on each side of the nav bar that aren't getting filled. I want the entire width to be covered with the nav bar, but I can't get it to work. Here is my html:

<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li>
            <a href="test1.html">Test1 <span class="carrot"></span></a>
            <div>
                <ul>
                    <li><a href="test#testA">TestA</a></li>
                    <li><a href="test.html#B">TestB</a></li>
                    <li><a href="teset.C">TestC</a></li>
                </ul>
            </div>
        </li>
        <li><a href="test2.html">Test2</a></li>
        <li><a href="test3.html">Test3</a></li>
    </ul>
</nav>

Css:

nav {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #888;
    display: block;
    margin: 8px 22px 8px 22px;
    overflow: hidden;
    width: 100%; 
    margin: 0;
    padding: 0;
}

What can I do to fix this?

https://i.sstatic.net/syLDV.png

Upvotes: 2

Views: 44199

Answers (7)

Mostafa Anssary
Mostafa Anssary

Reputation: 135

just add nav width

nav

{

width:100%;

}

Upvotes: 0

Matthew
Matthew

Reputation: 91

You can eliminate presets on browsers by "normalizing", just add this link in the head:

"https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css"

Also add the CSS:

* { box-sizing : border-box; }

I don't know how to use Markdown yet, if that's required here..

Upvotes: 0

mblancodev
mblancodev

Reputation: 506

Always use on your css stylesheet docs this first lines:

     * {
     box-sizing: border-box;
  }
     body, html {
     margin: 0 auto;
     padding: 0;
  }

Upvotes: 0

Caio Kawasaki
Caio Kawasaki

Reputation: 2950

Start all projects with the following CSS rule:

*{
border: 0;
padding: 0;
margin: 0;
}

All browsers have some default css rules. With this css rule i it will reset the browser default css...

Upvotes: 2

Tushar Gupta
Tushar Gupta

Reputation: 15933

All HTML document by default have a margin surrounding all four corners of it. As desirable as margins are in most cases, sometimes they with your design, such as a header bar that spans the entire page horizontally. In that case you have to explicitly assign 0 to the margins of the body.

body{
 margin: 0px;
}

Explanation of the answer given by @Luis P.A

Upvotes: 2

Alfred Huang
Alfred Huang

Reputation: 18265

nav {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #888;
    display: block;
    /* margin: 8px 22px 8px 22px; */
    /* overflow: hidden; */
    /* width: 100%; */ 
    margin: 0;
    padding: 0;

    /* notice below: */
    position: fixed;
    left: 0;
    right: 0;
}

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Set body to margin 0

CSS

body{
 margin: 0px;
}

Upvotes: 16

Related Questions