Fixed nav not taking up screen width

When running this code my fixed nav is not taking up the entire screen, I’ve tried to view this on many screen widths and they all have the same outcome. The Nav includes a table with links that navigate you to other areas of the website, It’s on every page of the website(3) and on every page it shows the nav bar not fully filling the page.

CSS CODE:

nav {
	width: 120%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 32px;
	border-bottom: 2px solid var(--black);
	position: fixed;
	top: 0;
	background: var(--dark-blue);
	z-index: 2;
}

table {
  border: 5px royalblue solid;
  padding: 5px;
  border-collapse: collapse;

}

HTML Code

<nav>  <table width="1800"  cellspacing="3" cellpadding="5">
  <tbody>
    <tr>
      <th scope="col"><a href="index.html">Home</a></th>
      <th scope="col"><a href="rates.html">Rates</a></th>
      <th scope="col"><a href="services.html">Services</a></th>
    </tr>
  </tbody>
</table>

</nav> 

Another look at it from another monitor.

Why is the width 120%? Shouldn’t it be 100%?

I was playing with sizes before hand 100 was the first thing I tired and then I tried to do more to fill the entire screen.

Try adding this to your CSS code:

body{
  border: 0;
  margin: 0;
  padding: 0;
}
1 Like

I’ve also tried to do 1920px as the width to fully fill the screens size.

I think that fixed it thanks for your help. :+1: :slightly_smiling_face:

You’re welcome! I edited my post but I forgot the closing }. Make sure to add that if you didn’t already.

Yeah closed it, and had a background image and font-family for the body.

Ive also been struggling with this thanks @anon40284853

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.