Не получается правильно разместить блоки?

Question

[Valentyn Fetisov]

Добрый вечер. Помогите правильно разместить блоки. Что то я застрял прям.


вот залил на хостинг для удобности

вот тут мой код. что то не могу понять где я накосячил)

<div class="block3">
        <div class="block_3_main_text">
            <h4 class="block_3_text_h4"><img class="orange_line" src="images/Rectangle%202.1.png" alt="">INDONESIAN
                CULTURE</h4>
            <h1 class="block_3_text_h1">Our culture here is very friendly to people</h1>
            <p class="block_3_text">known for his politeness, manners and gentleness. This becomes a characteristic when
                they mingle with other tribes and become basic traits that are passed down by their ancestors.</p>
            <a class="read_more" href="#">read more<img class="scroll_right_img" alt="scroll"
                                                                           src="images/arrow_right.png"></a>

        </div>
        <div class="block_3_img">
        <img  src="images/image%202.png" alt="">
        </div>
    </div>

и стили:

.block_3{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.block_3_main_text{
    padding: 115px 210px 115px 45px;
    margin-bottom: 250px;
}
.block_3_text_h4 {
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: #FBD784;
    padding-bottom: 30px;
    margin: 0;
}

.block_3_text_h1{
    font-style: normal;
    font-weight: 700;
    font-size: 64px;
    line-height: 87px;
    color: #FFFFFF;
    max-width: 555px;
    padding-bottom: 30px;
    margin: 0;}

.block_3_text{
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    max-width: 635px;
    color: #FFFFFF;
    padding-bottom: 30px;
    margin: 0;}

.block_3_img{
    width: 575px;
    height: auto;
}

Comments

[FrelFrloich]

flex-flow: row wrap; Тут проблемка, врап уберите, у вас переносится на след строку, так как не вмещается.

[Valentyn Fetisov]

FrelFrloich, та что то не помогло) вот задеплоил на файрбейс, может так будет проще помочь если не сложно

https://landing-test-2336a.web.app/

[FrelFrloich]

Valentyn Fetisov, у вас классы ещё разные .block_3, по ссылке .block3. В обще проверил.

.block_3{
display: flex;
justify-content: space-around;
}

[Valentyn Fetisov]

FrelFrloich, спасибо. Пора наверное отложить т отдыхать)

Answer 1

[VityaPop]

1. опечатка block3 >>> block_3 в род блоке
2. .block_3_main_text{
padding: 115px 210px 115px 45px;
margin-bottom: 250px;
} у тебя падинг на всю страницу.
3. Научись юзать девтулс браузера.
4. Почитай про методологию БЕМ(наименование классов)