Html Question posted in
Some basic documentation can be found here.

Html – Why does my <nav> have unnecessary width?

I’ve got a css dilemma. This question probably seems simple, if not laughable for you experienced programmers out there, but I’m gonna ask it anyway. So my <nav> is set to be the full width of the <body>. And I have a <ul> which is set to be the full width of the <nav> (minus the padding). However, when I added the ul, my nav "gained" additional width, even though (I think) I have limited the width to the body’s width. In other words, there is a scrollbar that I do not want. Please see pics and code below.
enter image description here

enter image description here

@font-face {
    font-family: "Nunito";
    src: url("nunito-regular.woff2") format('woff2');
    font-display: swap;
}

body {
    font-family: Nunito, sans-serif;
    margin: 0px;
    background-color: #93bafa;
    width: 100vw;
}

nav {
    background-color: #ffffff;
    display: inline-block;
    width: 1536px;
    padding: 20px;
}

nav h1, nav p {
    display: block;
}

nav ul {
    padding-inline-start: 0px;
    list-style: none;
    text-align: center;
    width: calc(100vw - 40px);
}

nav ul li {
    display: inline-block;
}

h1, p {
    margin-block: 0px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="global.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TGS Yoyos</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><h1>Te Du</h1><p>Freelancer for yoyo design</p></li>
        <li>Home</li>
        <li>Recent Projects</li>
        <li>About me</li>
        <li>Hire me</li>
      </ul>
    </nav>
    <h1>Featured Projects</h1>
    <!-- <img src="" alt=""> -->
  </body>
</html>

Any help is appreciated. Thank you!

Tags:

2

Answers


  1. 0

    Thats the padding of your nav bar. Also setting all the widths to an fixed pixel count wont make the side respoinsive for other screen sizes as they dont have the same amount of pixels as you.

    @font-face {
    font-family: "Nunito";
    src: url("nunito-regular.woff2") format('woff2');
    font-display: swap;
}

body {
    font-family: Nunito, sans-serif;
    margin: 0px;
    background-color: #93bafa;
    width: 100vw;
}

nav {
    background-color: #ffffff;
    display: inline-block;
    /*width: 1536px;*/
    width: 100%;
}

nav h1, nav p {
    display: block;
}

nav ul {
    padding-inline-start: 0px;
    list-style: none;
    text-align: center;
    width: calc(100vw - 40px);
}

nav ul li {
    display: inline-block;
}

h1, p {
    margin-block: 0px;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="global.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TGS Yoyos</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><h1>Te Du</h1><p>Freelancer for yoyo design</p></li>
        <li>Home</li>
        <li>Recent Projects</li>
        <li>About me</li>
        <li>Hire me</li>
      </ul>
    </nav>
    <h1>Featured Projects</h1>
    <!-- <img src="" alt=""> -->
  </body>
</html>
    Login or Signup to reply.
  2. 0

    As you want the <ul> to take up the entire space of the navbar, set the width to 100%. As the <ul> is in the <nav>, it will take up the maximum amount of space in the <nav> element.
    Also, you should give a set height to the nav.

    Here is the complete code for the ul element:

    nav ul {
  padding-inline-start: 0px;
  list-style: none;
  text-align: center;
  width: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search