Is it possible to create a css container without an additional div inside the parent tag?-CodePudding

I'm making a simple header in css and html.

I would like the background of the header to expand as the browser window expands, however the content must remain at a fixed size. Like max-width: 1024px for example.

Usually, i would do something like this :

<!-- Header with a div container -->
<header>
    <div >
        <a href="">Link</a>
        <a href="">Link</a>
        <a href="">Link</a>
    </div>
</header>

header {
  background: gold;
  width: 100%;
  height: 100px;
}

.header__container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1rem;
}

Is it possible to do this in css without using a div container inside the header tag ?

<!-- Header without a div container -->
<header>
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
</header>

Thank you for your support.

CodePudding user response：

Try this

body{
  margin: 0
}
header {
  background: gold;
  width: 100%;
  height: 100px;
}

.header__container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 calc((100vw - 1024px)/2);
  
  /* The lines below are just for illustration */
  
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width:1024){
  .header__container{
    padding: 0 0;
  }
}

<header >
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
</header>

Hope this is what you are looking for.

CodePudding user response：

header{
    background: red;
    padding-left: calc((100% - 1024px) / 2);
    padding-right: calc((100% - 1024px) / 2);
}

<header>
  Content
</header>