Excess space next to header

Question

I'm having issues with excess space to the left of my header.

I had the same problem with my footer as well using <nav> and <ul>, but edited this to only using <a> elements instead, and this seemed to do the trick. I would, however, like to keep the <nav> in the header, and preferably without using negative margin-left.

https://jsfiddle.net/thereseel/d75jurzy/6/

<header>
 <nav>
  <ul class="mainnav">
   <li><a href="#">Home</a></li>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Logo</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Location</a></li>
  </ul>
 </nav>
</header>

`ul` obtain the default CSS from the browser. In your case, you need to set the `padding-left:0` to the `ul`. — Ramesh, Jun 01 '19 at 13:42

saurabh · Answer 1 · 2019-06-01T13:51:01.820

1

you are facing excess space to the left of your header because of ul

browsers have default CSS values for many elements and ul is one of them.

from your current code just remove the padding

example:

.mainnav {
  /* add this to override default padding left of ul*/
  padding-left: 0;
}

Here is Reference of default CSS values used by browser : w3schools link

edited Jun 01 '19 at 13:51

answered Jun 01 '19 at 13:39

saurabh

2,553
2
21
28

Great, this did remove the padding, but now the list items don't spread out in Chrome. It does in JSFiddle as well as Safari and Firefox https://lybo.dev/htmlcss/ma3/ – Therese Jun 01 '19 at 13:59
I am using chrome and it seems to be working fine to me – saurabh Jun 01 '19 at 14:07
@Therese It's the effect of `flex`. You can use `justify-content: center;`. Let me know your desired output through a design – Ramesh Jun 01 '19 at 19:22

Nisha Sharma · Answer 2 · 2019-06-01T13:49:15.090

Try with this code. HTML code:

<header>
  <nav>
    <ul class="mainnav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Location</a></li>
    </ul>
  </nav>
</header>
<div class="main-body">

</div>

<footer >
  <section class="footnav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Order</a>
    <a href="#">Jobs</a>
    <a href="#">Contact</a>
  </section>
</footer>

CSS code:

.main-body{
  min-height:500px;
}
.mainnav {
    max-width: 800px;
    margin-left: 0;
    margin-bottom: 5px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
  padding-left:0px;
}

.mainnav li {
    display: inline-block;
}

.footnav {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
}
footer{
  position: fixed;
  left:0;
  right:0;
  bottom:0;

}
.footnav a {
    display: inline-block;
    padding: 10px;
}

Hope it working.

Excess space next to header

2 Answers2