The Width of my webpage extended. Is there a way I can make it smaller?-CodePudding

So as I was making a header for my webpage the width of the webpage extended for some reason. I tried some ways of shrinking it but I was unsuccessful. Below I have linked a codepen you can just scroll and you will see just plain white right of the header that I have created.

https://codepen.io/blurfnes/pen/KKoVgby

<!DOCTYPE html>
<html>
<head>
    <title>Hyard - 2022 Based Programming group</title>
    <link rel="stylesheet" href="index.css">

<div >
    <a href="index">
    <img src="images/logo.png" alt="head-logo" height="200" width="200" />
<div>
    <nav >
        <ul>
            <li><a href="projects/selector">Projects</a></li>
            <li><a href="en/about">About</a></li>
            <li><a href="en/versions">Versions</a></li>
        </ul>
        </nav>
    </div>
</div>


</head>
<body>

</body>
</html>

    .header {
    background-color: aqua;
    width: 1440px;
    margin-top: -8px;
    margin-left: -8px;
    margin-right: -8px;
    }
    .mainnav ul {
    position: relative;
    left: 450px;
    font-size: 50px;
    list-style: none;
    color: gray;
    text-transform: uppercase;
    top: -175px;
    }

    .mainnav ul li {
    color: gray;
    text-decoration: none;
    display: inline-table;
    }

    .mainnav ul a {
    color: gray;
    text-decoration: none;
    }

    .mainnav ul a:hover {
    color: black;
    }

Thanks for help!

CodePudding user response：

1- Don't put anything in the <head> tag except <tltle> & <link>. Major problem
2- <div > is very old and should be banned from you mind. use <header> instead.
3- <a> tag is a link. Why are you putting the <nav> inside a link? it counts your entire nav as one link...Major problem
4- in CSS, why is your header width fixed? it should be 100% all the time.
5- your mainnav CSS must be fixed...
6- instead of using left: 450px; use text-align: center

Your final code will look like this:

.header {
    background-color: aqua;
    width: 100%; /*100% width all the time no matter what the screen is*/
}
.mainnav ul {
    position: relative;
    text-align: center; /*Never use left, right, top, bottom in position!!!*/
    font-size: 20px;
    list-style: none;
    color: gray;
    text-transform: uppercase;
}

.mainnav ul li {
  padding-right: 10px; /*sets a little space between the <li> to the right*/
  color: gray;
  text-decoration: none;
  display: inline-table;
}

.mainnav ul a {
    color: gray;
    text-decoration: none;
}

.mainnav ul a:hover {
    color: black;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Hyard - 2022 Based Programming group</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
      <header >
        <img src="images/logo.png" alt="head-logo" height="200" width="200" />
        <nav >
            <ul>
              <li><a href="projects/selector.html">Projects</a></li>
               <li><a href="en/about.html">About</a></li>
               <li><a href="en/versions.html">Versions</a></li>
            </ul>
            </nav>
      </header>
    </body>
</html>

CodePudding user response：

/* Normal desktop :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {


}


/* Normal desktop :992px. */
@media (min-width: 992px) and (max-width: 1200px) {


}

 
/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {


}

 
/* small mobile :320px. */
@media (max-width: 767px) {

 
}
 
/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {width:450px}
 
}

Use this media querry, which device you want to shrinking.

CodePudding user response：

Try to use relative units and erase the left and top