Wyśrodkowanie divów / RWD

Question

Mam dwa problemy, może ktoś z Was podsunie rozwiązanie.

1. Jak widać w kodzie HTML, mam w sekcji 6 obrazków (po 2 w rzędzie). Szerokość ustawiona za pomocą grida z Bootstrapa. Nie wiem jak jest wyśrodkować. Wymyśliłem doraźne rozwiązanie z dodaniem col-md-offset-1 do diva z obrazkiem po lewej stronie.

Jak wyśrodkować divy, aby były idealnie na środku z 15px marginesem pomiędzy divem z obrazkiem po lewej i prawej stronie.

2.  W jaki sposób dopisywać media query w kodzie Sass do danego elementu? Proszę o przykład.  

<section class="second-section">
        <div class="headline">
            <p class="headline-par">Select your venue</p>
        </div>

        <div class="container">
            <div class="row">
                <div class="size img1 col-md-5 col-md-offset-1">
                    <div class="info">
                        <p class="par-info">Adelaide</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>
                <div class="size img2 col-md-5">
                        <div class="info">
                        <p class="par-info">Brisbane</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>
            </div>

            <div class="row">
                <div class="size img3 col-md-5 col-md-offset-1">
                        <div class="info">
                        <p class="par-info">Melbourne</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>

                <div class="size img4 col-md-5">
                        <div class="info">
                        <p class="par-info">Perth</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>
            </div>

            <div class="row">
                <div class="size img5 col-md-5 col-md-offset-1">
                    <div class="dark-layer">
                        
                    </div>    
                </div>

                <div class="size img6 col-md-5">
                        <div class="info">
                        <p class="par-info">Sydney</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>
            </div>
        </div>
    </section>

.second-section
	.headline {
		background-color: $project-pinkLight2;
		margin: 40px auto;
	}
		.headline-par {
			text-transform: uppercase;
			text-align: center;
			font-size: 25px;
			padding: 20px;
		}
	.container
		.row
			.size{
				width: 450px;
				height: 350px;
				margin-bottom: 15px;
				background-size: cover;
				background-position: center;
				overflow: hidden;
			}
			.img1 {
				@extend .size;
				background-image: url("bg_images/18.png");
			}
			.img2 {
				@extend .size;
				background-image: url("bg_images/9.png");
				margin-left: 15px;
			}
			.img3 {
				@extend .size;
				background-image: url("bg_images/8.png");
			}
			.img4 {
				@extend .size;
				background-image: url("bg_images/7.png");
				margin-left: 15px;
			}
			.img5 {
				@extend .size;
				background-image: url("bg_images/7.png");
			}
			.img6 {
				@extend .size;
				background-image: url("bg_images/6.png");
				margin-left: 15px;
			}
				.info {
					position: relative;
					top: 190px;
					left: 10px;
				}
					.par-info {
						text-transform: uppercase;
						color: #fff;
						font-size: 24px;
					}
					.par-info-data {
						color: #fff;
						font-size: 18px;
					}
				.dark-layer {
					position: relative;
					right: 15px;
					width: 450px;
					height: 350px;
					background-color: rgba(2,20,51,0.8);
				}

 

Answer 1

Aby wyśrodkować obrazki spróbuj styl css

margin: 0 auto;

lub

display: flex;

justify-content: center;

 

 

Przykład media:

@media (max-width: 750px){
    footer{
        .black{
            img{
                display: none;
            }
        }
    }
}

Comments

Pomoże ktoś? Utknąłem w końcowej części projektu (4 zdjęcia obok siebie na różowym tle - przygotowane pod slider - zawiera już strzałki). Niestety RWD tego elementu działa niepoprawnie. Chciałbym żeby dla max-width: 767px zdjęcia wyświetlały się równo jeden pod drugim (niestety teraz trochę się to rozjeżdża.) Próbowałem już na różne sposoby nad tym zapanować ale nie udało się. Przesyłam link do projektu na githubie: https://github.com/ramarcinek/HTML_task

---

Chętnie bym pomógł ale link nie dziala.