CSSで余白とマージンが減少するのを防ぐ

Question

画面が広くなるにつれて、黒い部分の外側のスペースも伸びます。テキストのあるdivには固定のパディング/マージンがあるため、一定ではなくなり、テキストが赤い部分に来るようになります。どのように私は

を是正するためにCSSを調整することができCSS

body{ 
     background-image: url("../desktop_images/contact_bg.jpg"); 
} 

.blackbox{ 
    width: 37%; 
    height:20%; 
    margin-top: 7%; 
    margin-left:3%; 
    margin-right:auto; 
    padding:35px; 
    padding-left: 0px; 
    display:block; 
    font-size: 18px; 
    background-image: url("../desktop_images/contant_diamond.png"); 
    background-repeat:no-repeat; 
    background-size:100% 100%; 
    background-color: red; 
} 


.left{ 
    color: #008ed2; 
    display:block; 
    float:left; 
    text-align: left; 
    line-height: 1.3em; 
    padding-left: 55px; 

    font-family: futura-pt-bold, sans-serif; 
    font-style: normal; 
    font-weight: 700; 

} 

.right{ 
    color: #008ed2; 
    display:block;  
    float:right; 
    text-align: right; 
    line-height: 1.3em; 
    padding-left: 55px; 

    font-family: 'futura-pt-bold', sans-serif; 
    font-style: normal; 
    font-weight: 700; 
} 

.bottom{ 
    color: white; 
    margin-top: 30px; 
    display:block;  
    float:left; 
    text-align: left; 
    font-size: 14px; 
    line-height: 2em; 
    padding-left: 25px; 
    width: 100%; 
    color: black; 
} 

.bottom2{ 
    color: white; 
    display:block;  
    float:left; 
    text-align: left; 
    font-size: 14px; 
    line-height: 2em; 
    padding-left: 25px; 
    font-weight: 600;/*this is futura demi*/ 
    width: 100%; 
    color: black; 
} 

HTML

 <div class="blackbox"> 
      <div class="left">ACTION IS NOT OUR MIDDLE NAME.</div> 
      <div class="right">IT'S OUR FIRST</div> 
      <div class="bottom">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact us immediately.</div> 
      <div class="bottom2">&nbsp;&nbsp;&nbsp;pasdf@xyz.com<br />xyz@asdf.com</div> 
    </div> 

Answer 1

パディングはあなたにハードコーディングされた結果を与えることが起こっています。 の割合、あなたのCSSを使用してください：

.blackbox{ 
    width: 37%; 
    height:20%; 
    margin-top: 7%; 
    margin-left:3%; 
    margin-right:auto; 
    padding:N%; 
    padding-left: 0px; 
    display:block; 
    font-size: 18px; 
    background-image: url("../desktop_images/contant_diamond.png"); 
    background-repeat:no-repeat; 
    background-size:100% 100%; 
    background-color: red; 
} 


.left{ 
    color: #008ed2; 
    display:block; 
    float:left; 
    text-align: left; 
    line-height: 1.3em; 
    padding-left: N%; 

    font-family: futura-pt-bold, sans-serif; 
    font-style: normal; 
    font-weight: 700; 

} 

.right{ 
    color: #008ed2; 
    display:block;  
    float:right; 
    text-align: right; 
    line-height: 1.3em; 
    padding-left: N%; 

    font-family: 'futura-pt-bold', sans-serif; 
    font-style: normal; 
    font-weight: 700; 
} 

.bottom{ 
    color: white; 
    margin-top: 30px; 
    display:block;  
    float:left; 
    text-align: left; 
    font-size: 14px; 
    line-height: 2em; 
    padding-left: N%; 
    width: 100%; 
    color: black; 
} 

.bottom2{ 
    color: white; 
    display:block;  
    float:left; 
    text-align: left; 
    font-size: 14px; 
    line-height: 2em; 
    padding-left: N%; 
    font-weight: 600;/*this is futura demi*/ 
    width: 100%; 
    color: black; 
}