wordpress(local)内でのレスポンシブ化

Question

.service-videoの部分をレスポンシブでウインドウ幅を小さくしていくと、margin-leftだけが小さくなり、隣にある画像と被らないようにしたいです。

.service-img内のimgにmargin-leftをvhをつけて、試してみましたが、レスポンシブしていくと画面右に空白ができてしまいます。

ピクセルは使わずにvw,vhを使った方法をご教授願いたいです。

<?php get_header(); ?>

<div class="top">
	<div class="top-background"></div>
    <nav>
        <ul class="nav-align">
            <li><a href="#"> 会社情報</a> </li>
            <li><a href="#feature"> 事業内容</a> </li>
            <li><a href="#product"> 制作事例</a> </li>
			<li><a href="#news"> 採用情報</a> </li>
			<li><a href="#news"> お知らせ</a> </li>
            <li><a href="#contact" class="header-contact"> NEVYコラム</a> </li>
		
        </ul>
	</nav>
	
	
	<h2 class="top-message">
		人に伝わる,<br>映像づくり
	</h2>
</div>

<section class="top-filter">
	<div class="top-filter-left">
		<img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/philosophy.svg" alt="" style="width:65vh; height:30vh;">
	</div>

	<div class="top-filter-right">
		<h2>人に伝わる、映像づくり</h2>
		<p>
			
			NEBYは創業以来、映像を中心に事業を作り上げてきました。
			<br>
			<br>
			スマートフォンの普及と共に、映像はとても身近なものになりました。
			<br>
			<br>
			第５世代移動通信システム（5G）の到来と共に、
			<br>
			<br>
			映像の世界はさらに広がりを見せようとしています
			<br>
			<br>
			<br>
			<br>
			どんなに技術が発展しても、
			<br>
			<br>
			どんなに手軽に映像が作れるようになったとしても、
			<br>
			<br>
			人を惹きつける映像でなければ意味がありません。
			<br>
			<br>
			<br>
			<br>
			それは人に等しく文字が書けても
			<br>
			<br>
			誰しも小説家に慣れないと同じように。
							
		</p>
	</div>
</section>

<section class="company-content">
	<div class="company-intro">
		<div class="company-intro-message">
			<h2>NEBYは映像を使って問題解決をする企業です</h2>
			<p>NEBYは創業以来、動画制作とライブ配信番組の制作をメインに事業を行って参りました。
				<br>
				
				映像によるコミュニケーションデザインを一括しておまかせいただけます。
				
			</p>

		</div>
		<div class="company-intro-link">
			<div class="president-message">
				<a href="">
					<h3>代表メッセージ</h3>
					<p>message</p>
					<div class="arrow-anime">
						<div class="arrow">

						</div>
					</div>
				</a>
			</div>
			<div class="company-border-left">

			</div>
			<div class="company-detail">
					<a href="">
						<h3>会社概要</h3>
						<p>company</p>
						<div class="arrow-anime">
							<div class="arrow">

							</div>
						</div>
					</a>
			</div>
			<div class="company-border-left"></div>
			<div class="company-history">
					<a href="">
						<h3>沿革</h3>
						<p>history</p>
						<div class="arrow-anime">
							<div class="arrow">

							</div>
						</div>
					</a>
			</div>
		</div>
	</div>


</section>

<section class="service">
	<div class="service-gradient">
		<div class="service-logo">
			<img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_title.svg" alt="" style="width:50vh; height:18.9509vh;">
		</div>
	</div>

</section>

<div class="service-bottom">
	<div class="service-video">
			<div class="video-top">
				<p class="count">01</p>
				<p class="next-to-count">Movie</p>
			</div>
	
			<div class="video-content">
				<h2>動画制作事業</h2>
				<p>
					動画の制作を、企画構成・絵コンテ・キャスティング・ロケ調整・カメラマン派遣・編集・カラーグレーディング・モーショングラフィックスなど、全てワンストップでおまかせいただけます。
				</p>
			</div>
	
			<div class="video-button">
	
        	    <a class="hover" href="#">VIEW MORE</a>
				<div class="button-arrow"></div>
	
			</div>
		
	</div>
	<div class="service-img">
			<img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_img1.png" alt="" style="height:52.7778vh;">
	</div>

	<div class="service-live">

		<div>
			<img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_img2.png" alt="" style="width:54.1667vw; height:52.7778vh;">
		</div>

		<div class="video-top">
			<p class="count">02</p>
			<p class="next-to-count">LiveStreaming</p>
		</div>

		<div class="video-content">
			<h2>ライブ配信事業</h2>
			<p>
				
				Youtubeやtwitterライブ、niconico、FacebookLive、LINELIVEなど、ライブストリーミング事業者と連携し、公式配信枠の確保から企画制作、当日の現場ディレクションなどワンストップでおまかせいただきます。
						
			</p>
		</div>

		<div class="video-button">

            <a class="hover" href="#">VIEW MORE</a>
			<div class="button-arrow"></div>
            
		</div>
	</div>
</div>

<!-- footer-menuから下をget_footer()に置き換える -->
<?php get_footer(); ?>




	<!-- pickup -->
	

	

$black-color:#596166;

body{
    padding: 0;
    margin: 0;
    
    background: url(../img/top.jpg)center center / cover no-repeat fixed;
    font-family: 'Yu Mincho','serif';
}

.nav-align{
    display: flex;
    width: 78vh;
    margin-right: auto;
    margin-left: auto;
    li{
        margin-right: 5vh;
        width: 25vh;
        a{
            text-decoration: none;
            color: white;
        }
    }
}


header{
    background-color:transparent;
    position: fixed;
    width: 100%;
   
    z-index: 10;
   
}



.header-inner{
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5vh;
}

.header-logo{
    margin-right: auto;
}

.header-right{
    margin-left: auto;
}

.header-right{
    a{
        color: white;
    }
}

ul{
    list-style: none;
}

.top{
    height: 100vh;
}
.top-message{
    margin-left: 13vw;
    font-size: 10vh;
    color: white;
}

.top-filter{
    padding-left: 13vw;
    display: flex;
    background-color: rgba(122, 137, 146, 0.863);
    filter: saturate(75%);
    padding-top: 10vh;

}

.top-filter-right{
    margin-left: 8vw;
    margin-top: 10vh;
    color: white;
    padding-bottom: 13vh;
    margin-right: 5vw;
}

.company-intro{
    margin: 5vh 0;
}

.company-intro-link{
    display: flex;
    width: 100vh;
    margin-right: auto;
    margin-left: auto;
}

.president-message,.company-detail,.company-history{
    margin: 0 9vh;
    
    width: 20vh;
    a{
        text-align: center;
        text-decoration: none;
        color: $black-color;
    }
}

.company-content{
    background-color: #ededed;
    border: 1vw #ededed solid;
}

.company-intro-message{
    text-align: center;
    h2{
        font-size: 4vh;
    }
    p{
        margin-bottom: 10vh;
    }
}
.arrow{
    width: 10vh;
    background-color: #596166;
    position: relative;
   margin-left: 1vh;
    margin-top: 6.2rem;
    height: 1px;
}

.arrow::after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 0 10px;
    border-color: transparent transparent transparent gray;
    position: absolute;
    top: -400%;
    left: 100%;
}

.button-arrow{
    width: 10vh;
    background-color: #596166;
    position: relative;
   margin-left: 15vh;
    
    height: 1px;
}

.button-arrow::after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 0 10px;
    border-color: transparent transparent transparent gray;
    position: absolute;
    top: -400%;
    left: 100%;
}

.company-border-left{
    border-left: 1px solid rgba(111, 121, 127, 0.3);
}

.service{
    background-color: white;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    

    width: 100vw;
}

.service-gradient{
    background-color: white;
    background: url(../img/service-back.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    height: 100vh;
    position: relative;
}

.service-logo{
    position: absolute;
    margin-top: 10vh;
    right: 10vw;
}

.service-bottom{
    background-color: white;
    height: 100vh;
    position: relative;
    padding-top: 10vh;
    border: 3px solid white;
    z-index: 3;
}

.service-video{
    width: 50vh;
    box-shadow: 2px 2px 4px gray;
    height: 65vh;
    padding: 0 5vh;
    top: -50vh;
    margin-left: 12vw;
    position: absolute;
    z-index: 2;
    background-color: white;
}

.service-live{
    @extend .service-video;
    top: -100vh;
    display: none;
}

.video-top{
    display: flex;
    p{
        margin: 0;
    }
   .count{
       font-size: 7vh;
       color: $black-color;
       padding: 3vh;
   }
   .next-to-count{
    font-size: 2vh;
    padding-top: 8vh;
   }
   
}

.video-content{
    margin-bottom: 8vh;
    h2{
        font-size: 4vh;
    }
    p{
        letter-spacing: 10px;
    }
}

.video-button{
    a{
    color: $black-color;
    padding: 2.5vh 7vh;
    border: 1px solid $black-color;
    background-color: white;
    text-decoration: none;
    }
}

.service-img{
    img{
       // margin-left:72vh;
        width:55vw;
        position: absolute;
        top: -30vh;
        z-index: 10;
        right: 0;
    }
}





	

Comments

[Lhankor_Mhy]

「レスポンシブしていくと画面右に空白ができてしまいます」とのことですが、この「レスポンシブする」とは「スクリーンサイズを小さくする」という意味で合っていますか？

そうであれば、ご提示のコードを試してみましたが、スクリーンの右端に空白が発生することはありませんでしたので、問題が再現できませんでした。