Не получается разместить блок в нужную позицию CSS , flex/

Question

Ребята помогите! Проблема вот в чем:

не получается правую колонку разместить потому как .blockleft занимает все пространство хотя я маржу убрал.

Подскажите в чем моя ошибка?

@font-face {
    font-family: Geometria;
    src: url(../fonts/geometria.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Geometria;
    src: url(../fonts/geometria-bold.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }
body {
    font-family: Geometria, serif;
    margin: 0;
    padding: 0;
}
header {
    background: url(../img/bg1.jpg) no-repeat center top/cover;

}
.cont {
    width: 930px;
    margin: 0 auto;
}
.menu {
    margin-top: 71px;
    float: left;
}
.menu1 {
    margin-left: 30px;
    margin-top: 80px;
    float: left;
}
.menu:hover {
    background: #DBDAD9;
}
.logo {

    float: left;
    margin-left: 170px;
    margin-top: 30px;
    height: 91px
}
.be {
    float: left;
    margin-top: 57px;
    margin-left: 13px;
}
header p {
    float: left;
    margin-top: 58px;
    margin-left: 30px;
    font-family: Geometria, serif;
    font-size: 16px;
    line-height: 26px;
}
.phone {
    float:right;
    font-size: 25px;
    margin-left: 20px;
    
}
.call {
    float: right;
    background: #EEF3FA;
    font-family: Geomeria, serif;
    padding: 16px 55px;
    border: 1px solid #2A94E2;
    box-sizing: border-box;
    border-radius: 5px;

}
button:hover {
    background: #2A94E2;

}
.head h1 {
    
width: 580px;
font-size: 40px;
line-height: 55px;
font-family: geometria-bold;
text-transform: uppercase;
color: #000000;
padding-top: 30px;
margin-top: 0px;
}
.head {
    width: 900px;
    display: flex;
    flex-wrap: wrap;
}

.par {
    
    padding: 0;
    margin-left: 0;
    margin-top: 10px;
    font-size: 22px;
    line-height: 36px;
    color: #000000;
}
.sp {
    border: solid;
    padding: 0;
    margin: 0;
    float: left;
}
.flex h2 {
    margin: 0;
    padding: 0;
     font-size: 80px;
     line-height: 131px;
     color: #2A94E2;
     
}
.flex p {

    width: 100px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
    color: #2A94E2;
    margin-right: 100px;
    margin-left: 20px;

}
.flex {
    width: 80%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
}
.glass {


}
.sham {
    margin: 0;
    padding: 0;
    float: none;
    margin-left: -380px;
    margin-top: 10px;
}
.vin {
    display: flex;
    justify-content: space-between;

}

.apart {
    margin-top: 20px;
    margin-bottom: 10px;
    background: #EEF3FA;
    font-family: Geomeria, serif;
    padding: 16px 90px;
    border: 1px solid #2A94E2;
    box-sizing: border-box;
    border-radius: 5px;
}

.double h2 {
    margin: 0 auto;
    font-family: Geometria,serif;
    font-size: 35px;
    line-height: 48px;
    text-align: center;
    margin-top: 60px;

}
.it {
       margin: 0 auto;
       font-family: Geometria;
       font-size: 20px;
       line-height: 36px;
       margin-top: 20px;

}
.double {
    margin: 0 auto;
     width: 930px;
}

.blok{
    width: 900px;
    height: 350px;
    border: solid #F6F6F6;
    margin-bottom: 30px; 
}
h4 {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
    font-family: Geometria serif;
    font-size: 18px;
    line-height: 70px;
    margin-left: 30px;
}
.pic {
    display: flex;
    justify-content: space-between;
    width: 500px;
    margin-top: 30px;
}

.pic1 {
        width: 300px;
    height: 170px;
        margin-right: 20px;
}
.picblock {
    display: flex;
    justify-content: space-between;
    font-family: Geometria serif;
    font-size: 16px;
    line-height: 26px;
    align-items: center;
    text-align: center;
    margin-left: 90px;
    width: 75%;
   
}
.blockleft {
    height: 290px;
    margin: 0;
    width: 60%;
    margin: 0px 0px 70px 30px;
    border-bottom: 2px solid #F1F1F1;
}
.blockright {
    border: solid;
    float: right;

}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <header>
         <div class="cont">
            <div>
                <img src="img/iconmenu.png" alt="" class="menu">
            <p class="menu1">Меню</p>
            <img src="img/logofull.png" alt="Blitz Estate" class="logo">
            <img src="img/be.png" alt="" class="be">
            <p>Продажа недвижимости <br>
            в Москва-Сити</p>
            <p class="phone">+7 (495) 199-19-99</p>
            <button class="call">Заказать звонок</button>
              </div>
              <div class="head">
                <h1>Агентство с международным именем Blitz Estate</h1>
                <p class="par">Поможем продать, купить и арендовать <br>
                недвижимость в Москве, районе Сити и области</p>
                <div class="flex">
                    <div class="conteiner">
                        <h2>17</h2>
                    </div>
                    <div class="conteiner">
                        <p>Работаем в 17 странах</p>
                    </div>
                    <div class="conteiner">
                        <h2>1963</h2>
                    </div>
                    <div class="conteiner">
                        <p>Помогли 1963-м клиентам</p>
                    </div>
                    <div class="conteiner">
                        <h2>10</h2>
                    </div>
                    <div class="conteiner">
                        <p>Лет на рынке недвижимости</p>
                    </div>
                
                </div>

                </div>
                <div class="vin">
                    <div class="cont">
                <img src="img/glass.png" class="glass">
              </div>
                <div class="cont">
                <p class="sham">Пройди тест и получи в подарок бутылку <br>
                    шампанского<strong> Veuve Clicquot</strong></p>
                </div>
                 </div>
                 <button class="apart">Подобрать недвижимость</button>
         </div>
    </header>
           
    <section class="double">
        <div class="cont">
            <h2>Пройдите тест из пяти вопросов</h2>
            <p class="it">Мы подберем 20 покупателей готовых купить вашу недвижимость в течении 24 часов</p>
         </div>
         <div class="blok">
         <div class="blockleft">
                <div>
            <h4>Выбирите местоположение объекта</h4>
         </div>
         <div class="pic">
                <img src="img/pic1.jpg" class="pic1">
                <img src="img/pic2.jpg" class="pic1">
            </div>
            <div class="picblock">
                <p class="text">В России</p>
                <p class="text">За границей</p>
            </div>
         </div>
         <div class="blockright">
            
         </div>
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <footer>
        <div class="cont">
            
         </div>
    </footer>
    
</body>
</html>

Answer 1

Насколько я понял тебе надо дописать в стили к классу block следующее

.blok {
display: flex;
justify-content: space-around;
align-items: center; //если центровка не надо - убери
}

БЛОГ НА HUSL

Не получается разместить блок в нужную позицию CSS , flex/

Ответы (1 шт):