Выравнивание логотипа с помощью css. Позиционирование изображения в % или vw

Question

Верстаю макет с Фигмы Webovio

Есть страница

/* Обнуление */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
ul,
ol,
li {
    list-style: none;
}
img {
    vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}
html,
body {
    height: 100%;
    line-height: 1;
    background: #fafafa;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    font-family: Poppins;
}


.wrapper {
    min-height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

._container {
    max-width: 1046px;
    padding: 0px 15px;
    margin: 0px auto;
    box-sizing: content-box;
}

._ibg {
    /*position: relative;*/
}

._ibg img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: right;
}


/* =========================================================================== */

.page {
}
.page__main-block {
}
.main-block {
    position: relative;
    height: 100vh;
    min-height: 811px;
}

.main-block__container {
    /*
    background-image: url("../img/mainblock/mainimage.png");
    background-size: 100% 100%;
    height: 811px;
    */
    /*width: 1441px;*/
    position: relative;
    z-index: 2;
}
.main-block__logo {
}
.main-block__body {
    /*margin-top: 22px;*/
    width: 50%;
    /*display: flex;
    flex-direction: column;*/
}
/*
@media (max-width: 100vw) {
    
    .main-block__body {
        display: flex;
        flex: 0 1 50%;
        flex-direction: column;
    }
        
}
*/
.main-block__smalltitle{
    /*position: relative;*/
    height: 21px;
    margin-left: 166px;
    /*right: 83.77%;*/
    /*top: calc(50% - 21px/2 - 195.5px);*/
    margin-top: 130.96px;
    width: 100px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    /* identical to box height */


    /*color: #FFFFFF;*/
    /*z-index: 10;*/
}

.main-block__title {
    /*position: absolute;*/
    margin-left: calc(166/1441*100vw);
    width: calc(616/1441*100vw);
    margin-top: 22px;
    /*bottom: 35.68%;*/
    height: 222px;
    
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 74px;
    /* or 123% */
    
    
    /*color: #FFFFFF;*/
    /*z-index: 10;*/
}
.main-block__text {
    margin-top: 24px;
    margin-left: calc(166/1441*100vw);
    width: calc(581/1441*100vw);
    height: 55px;
    
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    /*z-index: 10;*/
}
.main-block__items {
    margin-top: 45px;
    margin-left: calc(166/1441*100vw);
    padding-bottom: 170px;

    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;    
}
.main-block__link {
    height: 24px;
}
.main-block__link_yellow {
    color: yellow;   
}
.main-block__image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; 
}

/* ============================================================================ */

.main-block__logo_name {

    width: 179.23px;
    height: 33.05px;
    /*margin-left: calc(230.2/1441*100%);*/ /*214.8px;*/
    /*margin-top: 24px;*/
    
    background: #FFFFFF;
    /*z-index: 15;*/
}

.main-block__logo_hamburger_icon {
    /*
    margin-top: 23px;
    margin-right: calc(166/1441*100%);
    */ 
    width: 40px;
    height: 40px;

    background: #ffffff;
    /*z-index: 15;*/
}

.main-block__header {
    /*
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-block__nav {
    padding-top: 42px;
    /*
    margin-left: calc(50% - 1155/(2*1441)*100%);
    margin-right: calc(50% - 1155/(2*1441)*100%);
    */
    margin-left: auto;
    margin-right: auto;
    width: 1111px; /*1111px*/
    /*flex: 1 1 calc(1155/1441*100%);*/
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">    
    <title>Webovio</title>
</head>
<body>
    <div class="wrapper">
        <main class="page">
            <div class="page__main-block main-block">
                <div class="main-block__container">
                    <div class="margin-block__header">
                    <div class="main-block__nav">
                        <!--
                        <img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
                        <img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
                        -->
                        <!--<div class="main-block__header_image_1">-->
                            <img  src="https://i.stack.imgur.com/DFJ97.png" class="main-block__logo_name" alt="logoname">
                        <!--</div>-->
                        <!--<div class="main-block__header_image_2"></div>-->
                            <img  src="https://i.stack.imgur.com/kfwjf.png" class="main-block__logo_hamburger_icon" alt="menulogo">                       
                        <!--</div>-->
                    </div>
                    </div>
                    <div class="main-block__body">
                        <div class="main-block__smalltitle">A place where</div>
                        <div class="main-block__title">A creative agency for redemptive brands</div>
                        <!--
                        <div class="main-block__text">
                            Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
                        </div>
                        -->
                        <div class="main-block__items">
                            <!--<a href="" class="main-block__link main-block__link_yellow">Get in touch link</a>-->
                        </div>
                    </div>    
                </div>
                
                <div class="main-block__image _ibg">
                    <img src="https://i.stack.imgur.com/oQkT4.png" alt="cover">
                </div>
                
            </div>
        </main>
    </div>    
</body>
</html>

(Чтобы посмотреть содержимое, прокручивайте вниз)

Блок кода

.main-block__logo_name {

    width: 179.23px;
    height: 33.05px;
    margin-left: calc(164/1441*100vw); /*214.8px;*/
    margin-top: 23px;
    
    background: #FFFFFF;
    /*z-index: 15;*/
}

.main-block__logo_hamburger_icon {
    margin-top: 23px;
    margin-right: calc(166/1441*100vw);
    width: 40px;
    height: 40px;

    background: #ffffff;
    /*z-index: 15;*/
}

.main-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

отображается нормально при размере экрана 1366px

толстая черная линия на фоне буквы b в логотипе webovio. а при других разрешениях экрана логотип отображается неправильно

несмотря на использование vw. Т.е. при одном разрешении все выглядит нормально, а если подвигать окно (уменьшить/увеличить размеры окна), то логотип webovio выбивается из общего потока (а именно на фоне черной линии). Подскажите как добиться правильного расположения логотипа.

Answer 1

Стандартный размер

При уменьшении экрана

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.header {
  background-image: url(./bg-header.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  padding: 36px 0;
}

.header-top {
  max-width: 1110px;
  height: 43px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.burger {
  background-color: #F5F6F7;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

 <header class="header">
    <div class="header-top">
      <img src="./logo.svg" alt="img:Logo" class="logo">
      <div class="burger">
        <img class="burger-img" src="./burger.svg" alt="img: Burger-menu">
      </div>
    </div>
    <!-- /.header-top -->
  </header>
  <!-- /.header -->

БЛОГ НА HUSL

Выравнивание логотипа с помощью css. Позиционирование изображения в % или vw

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