I make a div (header_line) indent in margin using vw but when the distance of the scren decreases th-CodePudding

I make a div (header_line) indent in margin using vw but when the distance of the scren decreases the entire content decreases very much and moves out Is it possible to fix it somehow? https://codepen.io/dxxdly/pen/jOxYzpP

<header > 
        <div >
            <div >
                    <div >
                        <img src="assets/img/logo.png" alt="MetaRL">
                    </div>

                    <nav >
                        <ul>
                            <li><a href="#">Wave NFTs</a></li>
                            <li><a href="#">Stories</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>
            </div>

        <div >
                <a href="#"><img src="assets/img/twitter.png" alt="Twitter"></a>
                <a href="#"><img src="assets/img/discord.png" alt="Discord"></a>
                <a href="#"><img src="assets/img/youtube.png" alt="Youtube"></a>
                <a href="#"><img src="assets/img/telegram.png" alt="Telegram"></a>
            </div>
    </div>
</header>

CodePudding user response：

Try to add flex-wrap:wrap to your header_line element and and media query:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

                     transition:all 1s ease;

}

body {
/*  overflow-x: hidden;*/
    background-color: black;
}

header {
    max-width: 1440px;
    margin: 0 auto;
    height: 100px;
}

.header_line {
    margin: 0vw 7.29166666667vw;
    display: flex;
    justify-content: space-between;
    height: 100%;
    align-items: center;
  flex-wrap:wrap;
}

.logotip__nav {
    display: flex;
}

.navigation > ul {
    flex-wrap: wrap;
    display: flex;
}

.navigation > ul > li {
    padding-left: 40px;
    list-style-type: none;
}

.navigation > ul > li > a {
    font-weight: 100;
    font-family: DMMono;
    text-decoration: none;
    color: white;
    font-size: 1em;
}

.social > a > img {
    padding-left: 10px;
}

@media only screen and (max-width: 702px) {
.header_line{
  justify-content:center;
}
{

<header > 
        <div >
            <div >
                    <div >
                        <img src="assets/img/logo.png" alt="MetaRL">
                    </div>

                    <nav >
                        <ul>
                            <li><a href="#">Wave NFTs</a></li>
                            <li><a href="#">Stories</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </nav>
            </div>

        <div >
                <a href="#"><img src="assets/img/twitter.png" alt="Twitter"></a>
                <a href="#"><img src="assets/img/discord.png" alt="Discord"></a>
                <a href="#"><img src="assets/img/youtube.png" alt="Youtube"></a>
                <a href="#"><img src="assets/img/telegram.png" alt="Telegram"></a>
            </div>
    </div>
</header>

CodePudding user response：

Alright, what you are talking about is called, responsive design. that means you will design layouts that display things properly in all screen sizes. so when you design it, you must consider all screen sizes, not just the one you are working on it. and that's what you did because you set header max-width: 1440px; and you also added two boxes on right and left by adding margin in header line. are you going to use them for logo or something?

Anyway, according to your comment, I edited the code to make header width 100%. I'm not sure if this is what you want, but I hope it is.

and to learn more about responsive layout, check this link

* {
  margin: 0;
  padding: 0;
  /*    box-sizing: border-box; */
  /*   transition:all 1s ease; */
  border: 1px solid red;
}

body {
  /*    overflow-x: hidden;*/
  background-color: black;
}

header {
  width: 100%;
  margin: 0 auto;
  height: 100px;
  border: 2px solid green;
}

.header_line {
  /*    margin: 0vw 7.29166666667vw; */
  margin: 0 10px;
  display: flex;
  justify-content: space-between;
  height: 100%;
  align-items: center;
  flex-wrap: wrap;
}

.logotip__nav {
  display: flex;
}

.navigation>ul {
  flex-wrap: wrap;
  display: flex;
}

.navigation>ul>li {
  padding-left: 40px;
  list-style-type: none;
}

.navigation>ul>li>a {
  font-weight: 100;
  font-family: DMMono;
  text-decoration: none;
  color: white;
  font-size: 1em;
}

.social>a>img {
  padding-left: 10px;
}

<header >
  <div >
    <div >
      <div >
        <img src="assets/img/logo.png" alt="MetaRL">
      </div>

      <nav >
        <ul>
          <li><a href="#">Wave NFTs</a></li>
          <li><a href="#">Stories</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>

    <div >
      <a href="#"><img src="assets/img/twitter.png" alt="Twitter"></a>
      <a href="#"><img src="assets/img/discord.png" alt="Discord"></a>
      <a href="#"><img src="assets/img/youtube.png" alt="Youtube"></a>
      <a href="#"><img src="assets/img/telegram.png" alt="Telegram"></a>
    </div>
  </div>
</header>