Witam,
możliwe, że coś nagrzebałem przy projektowaniu bloków i stylowaniu w kontekście projektu strony responsywnej Mobile-First. Zależy mi na tym, aby obrazek widoczny poniżej rozciągnąć na całą szerokość przeglądarki tj. żeby obrazek nie był zamknięty w bloku określonym przez max-width jak dla innych bloków tj. main i main 2 stanowią 100% max-width. Chcę teraz wyjść po za ten max-width tylko dla tego zdjęcia. Jak to zrobić? Link do zdjęcia: https://iv.pl/images/87676767254341289320.jpg
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<link href="css/normalize.css" rel="stylesheet" type="text/css"/>
<link href="css/skeleton.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-grid.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-reboot.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 100px;
}
.menu2 {
background-color: #4CAF50;
height: 100px;
}
.header {
background-color: #30ff1c;
justify-content: center;
align-items: center;
height: auto;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}
.feature-4 {
background-color: #9c27b0;
}
.illustration {
width: 100%;
display: block;
}
.photo img {
width: 100%;
display: block;
}
/*.sign-up {*/
/* height: 200px;*/
/* order: 1;*/
/*}*/
/*.content {*/
/* order: 2;*/
/*}*/
/* Mobile Styles */
@media only screen and (max-width: 400px) {
body {
background-color: #F09A9D; /* Red */
}
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
}
.feature-1,
.feature-2,
.feature-3,
.feature-4 {
width: 50%;
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
body {
background-color: #B2D6FF; /* Blue */
}
.page {
width: 960px;
margin: 0 auto;
}
.menu {
width:25%
}
.menu2 {
width: 75%;
}
.feature-1,
.feature-2,
.feature-3,
.feature-4 {
width: 25%;
}
}
</style>
<body>
<div class='page'>
<div class='section menu'>
<p>MENU</p>
</div>
<div class="section menu2">
<p>MENU 2</p>
</div>
<div class="section header">
<img src="images/16.jpg" height="200px" width="100%"/>
</div>
<div class='section feature-1'>
<p>FEATURE 1</p>
</div>
<div class='section feature-2'>
<p>FEATURE 2</p>
</div>
<div class='section feature-3'>
<p>FEATURE 3</p>
</div>
<div class="section feature-4">
<p>FEATURE 4</p>
</div>
<div class='section content'>
<p>CONTENT</p>
</div>
<div class='section sign-up'>
<p>SIGN UP</p>
</div>
obrazek z przykładem dostępny pod linkiem poniżej.
CSS 
