Как убрать боковую линию в css?

Question

[Alexander]

Здравствуйте, наткнулся на такую проблему. При добавлении бокового меню, ширина которого 30%, а сам контент остальные 70%, всё это завернул в контейнер .wrapp и при появлении бокового меню появляется боковая линия, но если установить ширину для меню 40%, а для контента 60%, все корректно отображается без всяких линий, отпишите кто знает как решить данную проблему, буду очень благодарен

Comments

[Lynn «Кофеман»]

Код?

[Alexander]

<div class="wrapp">
        <div class="menu">
            <div class="menu_logo">
                <h1>Wooder</h1>
                <div class="line"></div>
            </div>
            <div class="menu_nav">
                    
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
            
          </div>

<div class="content">
 <header class="header">
        
                <div class="header_menu">
                    <svg class="ham menu-btn hamRotate180 ham5" viewBox="0 0 100 100"  >
                        <path
                              class="line top"
                              d="m 30,33 h 40 c 0,0 8.5,-0.68551 8.5,10.375 0,8.292653 -6.122707,9.002293 -8.5,6.625 l -11.071429,-11.071429" />
                        <path
                              class="line middle"
                              d="m 70,50 h -40" />
                        <path
                              class="line bottom"
                              d="m 30,67 h 40 c 0,0 8.5,0.68551 8.5,-10.375 0,-8.292653 -6.122707,-9.002293 -8.5,-6.625 l -11.071429,11.071429" />
                      </svg>
                    
                    <p>Menu</p>
                </div>
                   
                <div class="header_logo">
                    <h1>Wooder</h1>
                    <div class="line"></div>
                </div>
                
                <div class="header_nav">
                    
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                </div>
        
               
                <div class="header_lang">
                    <img class="info" src="src/img/icons/info.png" alt="info">
                    <select>
                        <option value="en">EN</option>
                        <option value="ru">RU</option>
                    </select>
                </div>
                
            </header>
            <div class="heading">
                <div class="heading_title">
                    <h1>Wooder</h1>
                        <button class="more">
                            learn more
                            <img src="src/img/heading/arrow_btn.png" alt="arrow">
                        </button>
                        <div class="animouse">
                            <img class="mouse" src="src/img/icons/mouse.png" alt="mouse">
                            <img class="arrow" src="src/img/icons/mouse_arrow.png" alt="arrow">
                            <h3 class="scroll">scroll</h3>
                        </div>
                </div>
        
                <div class="left-container">
                    <img class="left_background" src="src/img/heading/left_bg.png" alt="background">
                    <div class="letter">
                        <img src="src/img/heading/f.png" alt="letter">
                    </div>
                </div>
        
                <div class="right-container">
                    <img class="right_background" src="src/img/heading/right_bg.png" alt="background">
                    
                    <div class="text">
                        <h3>Furniture & decor</h3>
                    </div>
                    <img class="share" src="src/img/icons/share.png" alt="share">
                    <div class="line"></div>
                </div>
            </div>
   </div>
</div>

[Alexander]

Алексей Тен,

.wrapper
    position: relative
    overflow-x: hidden

.menu
    position: fixed
    left: 0
    top: 0
    z-index: 99
    width: 30%
    height: 100vh
    display: flex
    flex-direction: column
    align-items: center
    padding: 20px
    background-color: black
    transition: all 0.3s ease
    transform: translateX(-100%)
    &_logo
        position: relative
        padding: 20px 0
        h1 
            color: #ffffff
            font-family: "Proxima Nova Bold"
            font-size: 32px
            text-transform: uppercase
            letter-spacing: 10.8px
            
        .line
            width: 58px
            height: 4px
            background-color: #bea67c
            position: absolute
            left: 40px
            top: 48%       
    &_nav
    
        ul
            
            list-style: none
            
            li 
                margin: 20px 0
                a 
                    
                    font-family: 'Proxima Nova Bold'
                    text-transform: uppercase
                    color: rgba(#ffffff, 0.5)
                    font-size: 17px
                    line-height: 27px
                    letter-spacing: 0.38px
                
             
.menu_active
  transform: translateX(0%)

.content
  transition: all 0.3s ease
  position: relative
  z-index: 0

.content_active
  transform: translateX(30%)
  transition: all 0.3s ease

[Alexander]

Алексей Тен,

$(document).ready(function () {
  var menu = $('.menu');
  var burger = $('.menu-btn');
  burger.on('click', function(e) {
    burger.toggleClass('active');
    menu.toggleClass('menu_active');
    $('.content').toggleClass('content_active');
  })
  
  $(document).mouseup(function (e) {
   
    if (e.target != menu[0] && burger.has(e.target).length === 0) {
        menu.removeClass('menu_active');
      $('.content').removeClass('content_active');
      burger.removeClass('active');
    }
  });
});

[Alexander]

Алексей Тен, прикол в том что на адаптиве все нормально

[Одиночка Айс]

Александр Лисовский, а вот теперь перенесите весь код в вопрос и оформите по человечески

[Alexander]

ИСХОДНЫЙ КОД:

<div class="wrapp">

        <div class="menu"></div>

        <div class="content"></div>

</div>

.wrapp
    position: relative
    overflow-x: hidden
.menu
    position: fixed
    left: 0
    top: 0
    z-index: 99
    width: 30%
    height: 100vh
    display: flex
    flex-direction: column
    align-items: center
    padding: 20px
    background-color: black
    transition: all 0.3s ease
    transform: translateX(-100%)
                    
.menu_active
  transform: translateX(0%)

.content
  transition: all 0.3s ease
  position: relative
  z-index: 0

.content_active
  transform: translateX(30%)
  transition: all 0.3s ease

[Антон Усачев]

Трансформации в процентах – неточная сущность. Всякий браузер рендерит по-своему на разных ширинах экрана.
Не претендую на истину:

.content_active {
	transform: translateX(calc(30% - 1px));
}

[Lynn «Кофеман»]

Код должен быть в вопросе, а не в ответе или комментариях.

[Alexander]

Антон Усачев, Спасибо большое!

[Антон Усачев]

Алексей Тен, прекрасное замечание. Только я не считаю, что дал ответ, а код оформил для красоты.

Answer 1

[Антон Усачев]

Как один из вариантов решения. Не самый удачный, но имеющий право на жизнь, по многочисленным просьбам продублирую в ответы.

.content_active {
    transform: translateX(calc(30% - 1px));
}

Answer 2

[BATPYIIIKOB]

Без кода в вопросе и ссылки на реп - можно эту линию в фотошопе замазать :) 100% рабочий вариант