CODEWITHSUNDEEP
htmlcssnav
Jvyki Razbalowski
Jvyki Razbalowski

Reputation: 1

100% Width CSS navbar menu

I made a navbar but I can not make it full width.

Image preview: enter image description here

I'd like to have it full width and without padding, like this: enter image description here

#cssmenu {
  width: 100%;
  font-family: Raleway, sans-serif;
  line-height: 1;
  border-bottom: 4px solid #1CE678;

}
#cssmenu > ul {
  background: #3db2e1;

}
#cssmenu > ul > li {
  float: right;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}



<div id='cssmenu'>
            <ul>
                <li><a href='#'>1</a></li>
                <li><a href='#'>2</a></li>
                <li><a href='#'>3</a></li>
                <li><a href='#'>4</a></li>
                <li class='active'><a href='#'>5</a></li>
            </ul>
        </div>

Upvotes: 0

Views: 206

Answers (5)

Christian Garcia
Christian Garcia

Reputation: 1

Have you tried simply using <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside of your html head? My personal website navbar file is very similar to yours but I haven't encountered this sort of issue.

Upvotes: 0

Akankha Ahmed
Akankha Ahmed

Reputation: 121

make you margin padding 0

Html

 <div id=cssmenu >

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  </div>

Css

body{
  margin:0;
}
#cssmenu {
  width: 100%;
  font-family: Raleway, sans-serif;
  line-height: 1;
  border-bottom: 4px solid #1CE678;
 margin:0;
  padding:0;

}

    #cssmenu > ul {
      background: #3db2e1;
      margin:0;
      padding:0;
      text-align:right;

    }

    #cssmenu > ul > li {
      display:inline-block;

      -webkit-perspective: 1000px;
      -moz-perspective: 1000px;
      perspective: 1000px;
    }

Upvotes: 1

idkn
idkn

Reputation: 432

Don't forget to put this on every css files, I hope it will help

* {
    box-sizing: border-box;
}

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

Upvotes: 0

Reedzev_
Reedzev_

Reputation: 156

Try to remove body margin:

body { margin: 0; }

Upvotes: 1

steliosbl
steliosbl

Reputation: 8921

The cause is most likely your <ul>. Modify your CSS like so:

#cssmenu > ul {
  background: #3db2e1;
  margin:0;
  padding:0;

}
#cssmenu > ul > li {
  float: right;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  margin:0;
  padding:0;
}

You'll also want to make sure that the parent element (presumably body) doesn't have any padding.

body {
    padding:0;
    margin:0;
}

Upvotes: 0

Related Questions