<div id="container1" class="container">
<p>1.</p>
<p>width: 100%;<br />
max-width: 800px;</p>
</div>
<div id="container2" class="container">
<p>2.</p>
<p>width: 800px;<br />
max-width: 100%;</p>
</div>
@import url(https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap);
:root {
--pink: #E726B5;
--yellow: #FFE699;
--cream: #FBE5D6;
--green: #70AD47;
--red: #FF0000;
--text-shadow: 0.3px 0.3px #000000e0;
}
* {
text-shadow: var(--text-shadow);
font-size: 20px;
font-family: 'Architects Daughter';
box-sizing: border-box;
}
body {
height: 100vh;
background-color: var(--yellow);
padding-top: 10px;
}
.container {
margin: 0 auto 16px; /* Center */
padding: 18px;
font-size: 24px;
border: 3px dashed var(--pink);
display: flex;
gap: 30px;
}
#container1 {
width: 100%;
max-width: 800px;
background-color: Salmon;
}
#container2 {
width: 800px;
max-width: 100%;
background-color: var(--cream);
}
p {
margin: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.