Równe odstępy elementu między dwoma innymi

Question

Cześć. Mam problem z wyśrodkowaniem elementu tak by był w równych odstępach od pozostałych, Prawdopodobnie, źle nadałam "display", ale próbowałam już wszystkiego no i nie mogę do tego dojść. Zerknijcie proszę w mój kod! Dodam jeszcze, że dopiero się uczę. Z góry dziękuję.

Powinno to wyglądać tak jak poniżej. Niestety oba elementy środkowe w obu działach nie chcą mi się dostosować :)

            <div class="recommended center">
                <div class="recMovies">
                    <div class="headerBox">
                        <h2>POLECANE FILMY</h2>
                        <a href="#" class="seeMore buttonImg">Zobacz więcej</a>
                    </div>
                    <div class="content">
                        <div class="firstCont">
                            <a href="#"><img src="images/logan.jpg" alt="Wolverine" /></a>
                            <a class="title" href="#">Logan: Wolverine (2017)</a>
                        </div>
                        <div class="secondCont">
                            <a href="#"><img src="images/curie.jpg" alt="Wolverine" /></a>
                            <a class="title" href="#">Maria Skłodowska-Curie (2016)</a>
                        </div>
                        <div class="thirdCont">
                            <a href="#"><img src="images/moonlight.jpg" alt="Moonlight" /></a>
                            <a class="title" href="#">Moonlight (2016)</a>
                        </div>
                    </div>
                </div>
                <div class="recSeries">
                    <div class="headerBox">
                        <h2>POLECANE SERIALE</h2>
                        <a href="#" class="seeMore buttonImg">Zobacz więcej</a>
                    </div>
                    <div class="content">
                        <div class="firstCont">
                            <a href="#"><img src="images/narcos.jpg" alt="Narcos" /></a>
                            <a class="title" href="#">Narcos (2015)</a>
                        </div>
                        <div class="secondCont">
                            <a href="#"><img src="images/westworld.jpg" alt="Westworld" /></a>
                            <a class="title" href="#">Westworld (2016)</a>
                        </div>
                        <div class="thirdCont">
                            <a href="#"><img src="images/gameofthrones.jpg" alt="Gra o tron" /></a>
                            <a class="title" href="#">Gra o tron (2011)</a>
                        </div>
                    </div>
                </div>
            </div>

 

 

Z CSS:

.headerBox{
    font:700 26px Rajdhani;
    color:#202027;
    display: inline-block;
    vertical-align: middle;

}
.buttonImg{
    color: #fff;
    background: #3cbc9f url(../images/whitearrow.png) no-repeat center right 14px;
	padding: 5px 44px 5px 24px;
    vertical-align: middle;
    
}
.seeMore{
    font:400 16px Rajdhani;
    color:#fff;
    text-decoration:none;
    height:15px;
    display: inline-block;
    padding: 3px 44px 3px 24px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    margin-top:-10px;
}
.headerBox h2{
    display:inline-flex;
    padding:0;
}
.headerBox a{
    padding-bottom:10px;
}
a{
    text-decoration:none;
    color:inherit;
}


body> section .recommended.center .content{
    display:flex;
    font:700 24px Rajdhani;
    color:#616165;
}
body> section .recommended.center .content a img{
    vertical-align:middle;
    
}
body> section .recommended.center .content .title{
    display:inline-block;
    margin-left:10px;
    margin-top: 5px;
}
body> section .recommended.center .content .thirdCont img{
    display:flex;

}

 

 

Comments

Tagu img się NIE zamyka.

---

rzeczywiście, dziękuję!

Answer 1

Witam. Nieprawidłowe odniesienie do elementu

body > section .recommended.center .content

 

Comments

już pozmieniałam kod w tym problemie co pisałam, ale spawdziłam w innym miejscu gdzie mam taki sam przypadek. Z tego co widzę to nic się nie sypie jak odejmę .center.

---

WNIOSKI ? :)

---

To, że mogę używać bez .center? Okej, ale tak czy siak, wcześniejszy zapis nie był błędny.

---

Ok. NIE BYŁ :)

---

Dzięki za odpowiedzi :) Zawsze coś nowego wpadło do głowy.