Как центрировать блок посередине в адаптивке?

Question

[kkazy]

Как прикрепить его посередине и что-бы он не двигался в адаптивке,
Помогите пожалуйста :)

<div class="standart">
    <div class="container">
         <div class="standart-block" >
                div class="in-main">
                    <div class="main_thing">
                        <h2 class="main_header">Высокие стандарты разработки</h2>
                             <p class="main_des">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem 
                                Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.  стандартной "рыбой" 
                                   для текстов на латинице с начала XVI века. </p>                              
                                    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"  class="company_link" 
                                                 >Подробнее о компании</a>
                                            </div>
                                                <img src="img/Rectangle 2.png" class="photo_sandart">
                                                  </div>
                                                <div class="line"></div>
                                                      </div>

.standart .container{
        height: 797px;
        width: 100vw;
        background-color: rgba(246, 246, 248, 1);
        position: relative;
        top: 195px;
       
    }

    .standart-block{
        width: auto;
        height: auto;
        position: relative;
        top: 100px;
        left: auto;
        right:auto;
        
        
        
    }

    .in-main{
    display: flex;
 
    }

    @media (max-width:1323px){
        .in-main{

        }
    }
    
    .main_thing{
    height: 295px;
    width: 489px;
    position: relative;
    top: 0px;
    left: 0px;
    
    
    }


     .main_header{
    font-family:'Montserrat', sans-serif ;
    font-weight: 700;
    font-size: 33px;
    color:rgba(50, 50, 50, 1);
    line-height: 52.66px;
    
    }

    .main_des {
    color: rgba(153, 153, 153, 1);
    line-height: 25.36px;
    font-family:'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    width: 431px;
    margin: 26px 0px 20px 0px;
    }
    
    .company_link{
        font-family:'Montserrat', sans-serif ;
        font-weight: 500;
        color: rgba(73, 133, 255, 1);
        font-size: 14px;
    
    }


    .photo_sandart{
    width: 440px;
    height: 340px;
    margin-left: 50px;
    
    }

Заранее спасибо

Answer 1

[Aleksander911]

С наставником тебе явно не повезло. Хотя бы так сделай для начала что ли

.standart {
  background: rgb(246, 246, 248);
  position: relative;
  top: 195px;
}
.standart .container {
  margin: auto;
  max-width: 980px; 
  width:95%;
}
.in-main{
  display: flex;
}
.main_header{
  font-family:'Montserrat', sans-serif ;
  font-weight: 700;
  font-size: 33px;
  color:rgba(50, 50, 50, 1);
  line-height: 52.66px;    
}
.main_des {
  color: rgba(153, 153, 153, 1);
  line-height: 25.36px;
  font-family:'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  width: 431px;
  margin: 26px 0px 20px 0px;
}    
.company_link{
  font-family:'Montserrat', sans-serif ;
  font-weight: 500;
  color: rgba(73, 133, 255, 1);
  font-size: 14px;    
}
.photo_sandart{
  width: 440px;
  height: 340px;
  margin-left: 50px;    
}

Comments

[kkazy]

Спасибо )

Answer 2

[Noder SS]

Поместите все в блок с width: 100%; и пропишите флекс. Display: flex; justify-content: center;