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

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 class="header__container">
        <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>

enter image description here

Thank you for your support.

htmlcss


Solution 1:[1]

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 class="header__container">
    <a href="">Link</a>
    <a href="">Link</a>
    <a href="">Link</a>
</header>

Hope this is what you are looking for.

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chakib Salah
Solution 2 Vugar Taghiyev

Related Questions