css befehl außer kraft setzen

[Robert0001]

Hallo,

ich habe auf meiner Webseite <main> mit max-width: 1520px festgelegt. Jetzt möchte ich aber einen container der in einer section liegt auf die volle Breite der Seite festlegen. ist das möglich?

.main {
max-width: 1520px
}

.bg-black {
background-color: #000;
color: #fff;
width: 100% !important;
}

 

[kim88]

Du kannst den Container z.b. Absolut positionieren -> dann wäre es möglich.

Grundsätzlich würde ich die aber empfehlen, dem <main> keine max-width zu geben. Erstelle dazu z. b. eine Klasse ".container".
Dann kannst du ein <div class="container"> um die Elemente legen die im Container sein sollen und für die Sektion mit voller Breite verzichtest du einfach darauf.

Und zukünftig Code bitte in Code Tags.

 

[Robert0001]

vielen dank :-)
ps. mach ich

 

[netzgestaltung]

@kim88 statt container bin ich zu einem "inner" system übergegangen, da es sich von außen nach innen nachvollziehen ließt.
<div class="main"><div class="inner"></div></div>

aber das problem ist ja, das der ganz innenliegende div die ganze breite haben soll, nicht aber die texte davor/danach

.main{
  width:auto;
}
.main section > *{
  max-width:1520px;
}
.main section > .mein-container{
  max-width:100%;
}

 

[floq0r]

The famous .inner, now featured by .cont_inner, .subcont_inner and .innerinner

 

[netzgestaltung]

Aber nur kann, nicht muß - es geht auch ohne.
ist eh schon alles abgespeckt, früher war das so (ie6/wordpress/drupal kompatibel):

<section id="menuBar" class="menu-bar container sidebar region">
 <div class="inner wrapper clearfix">

unterstriche in klassen, BEM oder bootstrap sind eher nicht mein ding ;-)

 

[Robert0001]

.container {
display: flex;
flex-basis: 100%;
flex-wrap: wrap;
gap: 0 5rem;
max-width: 1600px;
margin: 0 auto;
padding: 1rem;
}
.container div {
flex: 1 1 0;
}

so passt es perfekt für mich :-)