画面解像度変更のdiv幅を固定

私はページを開くは、通常はそれが動作しますが、私は画面の解像度を変更すると、.content-体クラス（対角と水色）は、ページ全体の幅を満たしていない（ピンク列ことがあります）。誰でも助けてくれますか？ありがとうございました。

全体CSSコードです：

html { 
    width: 100%; 
} 
body { 
    background-color: #ffe1d9; 
    width: inherit; 
    overflow-x: hidden; 
} 

.top-header { 
    width: 100%; 
} 

.container { 
    width: 100% - 25px; 
} 

.content { 
    background-color: #ffe1d9; 
    width: 100%; 
} 

.header { 
    padding: 40px; 
    width: 50%; 
    float: left; 
} 

.presentation-header { 
    //position: relative; 
    ////padding-top: 0; 
    //top: 150px; 
    //z-index: 999; 
    max-width: 1000px; 
    //margin: 0 auto; 
} 

li.header-menu-item { 
    padding: 15px; 
    font-size: 16px; 
    a { 
    color: #666167; 
    text-decoration: none; 
    &:hover { 
     color: #111111; 
     font-weight: 400; 
     box-shadow: #111111; 
    } 
    span { 
     &:hover { 
     border-bottom: 1px solid #60629d; 
     } 
    } 
    } 
} 

.active { 
    border-bottom: 1px solid #60629d; 
} 

.header-menu { 
    display: block; 
    padding-top: 70px; 
    text-align: right; 
} 


#slogan { 
    width: 50%; 
    float: left; 
} 

#slogan-img { 
    width: 50%; 
    float: left; 
} 

#button { 
    background: #1d1c24; 
    padding: 15.5px 51px; 
    -webkit-border-radius: 40px; 
    -moz-border-radius: 40px; 
    border-radius: 40px; 
    color: white; 
    font-size: 12px; 
    font-family: SansSerif, Serif; 
    text-decoration: none; 
    vertical-align: middle; 
    font-weight: bold; 

} 

#button:active { 
    background: #000000; 
} 

#sign-in-button, #submit { 
    background: white; 
} 

#sign-in-button, #next { 
    padding: 20px 20px 20px 20px; 
    -webkit-border-radius: 40px; 
    -moz-border-radius: 40px; 
    border-radius: 40px; 
    color: black; 
    font-size: 14px; 
    font-family: Georgia, Serif; 
    text-decoration: none; 
    vertical-align: middle; 
    text-align: left; 
} 

#next { 
    background: #ffe1d9; 
    margin-left: 150px; 
    width: 50%; 
} 

#submit { 
    background-color: #ffe1d9; 
    padding: 15px 20px; 
    -webkit-border-radius: 40px; 
    -moz-border-radius: 40px; 
    border-radius: 40px; 
    color: black; 
    font-size: 14px; 
    font-family: Georgia, Serif; 
    text-decoration: none; 
    vertical-align: middle; 
    text-align: left; 
} 

#sign-in-button:active, #submit:active { 
    background: #ffe6e3; 
} 

select { 
    padding: 15px 50px; 
    -webkit-border-radius: 40px; 
    -moz-border-radius: 40px; 
    border-radius: 40px; 
    border: 0 solid; 
    color: black; 
    font-size: 14px; 
    font-family: Georgia, Serif; 
    text-decoration: none; 
    vertical-align: middle; 
    text-align: left; 
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #e9f3f5; 
    background-position: 100%-15px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
} 

h2 { 
    font-family: 'Montserrat'; 
    font-weight: 700; 
    font-size: 7.0rem; 
    line-height: 100%; 
    letter-spacing: -.5rem; 
    margin: initial; 
} 

//.padding { 
//padding-top: 30px; 
//padding-bottom: 50px; 
//} 

/*Line bellow Features*/ 
.span-decoration { 
    border-bottom: 5px solid #caafaf; 
    width: 30px; 
    margin: 10px 0 20px 0; 
} 

/*Draws a diagonal line in a box*/ 
.diagonal-line-box { 

    position: relative; 
    width: 100%; 
    height: 200px; 
    clear: both; 
    //background: red; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(left top, #ffe1d9 49.75%, #989cdb 50.25%); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to bottom left, #ffe1d9 49.75%, #989cdb 50.25%); /* Standard syntax */ 
} 

/*Draws a diagonal line in a box*/ 
.second_diagonal-line-box { 

    position: relative; 
    width: 100%; 
    height: 300px; 
    //top: -150px; 
    background: red; /* For browsers that do not support gradients */ 
    background: -webkit-linear-gradient(right top, #989cdb 49.75%, #60629d 50.25%); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(bottom left, #989cdb 49.75%, #60629d 50.25%); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(bottom left, #989cdb 49.75%, #60629d 50.25%); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to bottom right, #989cdb 49.75%, #60629d 50.25%); /* Standard syntax */ 
} 

//html, .content-body { 
// width: 100%; 
//} 
.content-body { 
    position: relative; 
    width: 100%; 
    background-color: #989cdb; 
    margin: 0 auto; 
    //left: 50px; 
} 

#slogan-image { 

} 

section { 

    .cashflow { 
    width: 70%; 
    float: left; 
    //margin: -60px -80px; 
    margin-top: -60px; 
    margin-left: -90px; 
    //margin-right: -150px; 
    } 

    .cashflow-text { 
    width: 30%; 
    float: left; 
    } 

    .cashflow, .cashflow-text {display: inline-block;} 
} 

section { 

    .budget { 
    width: 70%; 
    float: left; 

    margin-left: 0px; 
    margin-right: -100px; 
    margin-top: -60px; 
    } 

    .budget-text { 
    width: 35%; 
    float: left; 
    } 

    .budget, .budget-text { 
    display: inline-block; 
    } 
} 

.wrapper { 
    background: #282731; 
    border-radius: 1px; 
    box-sizing: border-box; 
    -webkit-box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59); 
    -moz-box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59); 
    box-shadow: 22px 17px 58px 3px rgba(54, 45, 105, 0.59); 
    margin: auto; 
    position: relative; 
    float: left; 
    max-width: 800px; 
    width: 100%; 
    top: -280px; 

} 

.wrapper.box { 
    padding: 80px; 

    form { 
    padding-top: 50px; 
    } 
} 

.wrapper-payment { 
    background: -webkit-linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(90deg, #ffffff 50%, #2e2935 50%); /* Standard syntax */ 
} 

@-moz-document url-prefix() { 
    .wrapper.box { 
    margin-left: 0px; 
    } 
    #button { 
    font-size: 11px; 
    } 
} 


.wrapper-image { 
    background: #282731; 
    border-radius: 1px; 
    box-sizing: border-box; 
    -webkit-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59); 
    -moz-box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59); 
    //box-shadow: 22px 17px 58px 3px rgba(89,51,51,0.59); 
    //margin: auto; 
} 

.title{ 
    font-family: 'Montserrat'; 
    font-weight: 700; 
    font-size: 5.0rem; 
    line-height: 100%; 
    letter-spacing: -.5rem; 
    //margin: initial; 
} 

.title-body { 
    font-size: 2rem; 
    color: white; 
} 

//Form styling 

input, label{ 
    display: block; 
} 

label { 
    color: #7f7e83; 
} 

input { 
    width: 100%; 
    padding: 4px 0; 
    margin: 5px 0 15px 0; 
    -webkit-border-radius: 40px; 
    -moz-border-radius: 40px; 
    border-radius: 40px; 
    border: 2px solid #83828a; 
    background-color: #282731; 
    color: white; 
    padding-left: 10px; 
    font-family: Georgia, Serif; 
    font-weight: bold; 
} 

.first-part-form { 
    width: 100%; 

} 

.form-first-left { 
    width: 46%; 
    float: left; 
    margin-right: 20px; 
} 

.form-first-right { 
    width: 46%; 
    float: right; 
} 

//End form styling 

.post-content { 
    position: relative; 
    width: 100%; 
    //height: 750px; 
    background-color: #60629d; 
    //top: -150px; 
    //z-index: -10; 
} 

#post-content-div { 
    //height: 100px; 
} 

#next { 
    background-color: #ffe1d9; 
    color: #282731; 
} 

#login-or-company { 
    border: none; 
    border-radius: 0; 
    border-bottom: 1px solid white; 
    padding-left: 0; 
} 

#login-url { 
    color: white; 
    font-size: 16px; 
    //float: left; 
    padding-top: 18px; 
    padding-left: 0; 
} 

#login-url, #login-or-company { 
    display: block; 
} 

.footer { 
    position: relative; 
    display: block; 
    width: 100%; 
    background: #60629d; 
    padding-bottom: 50px; 
    margin: 0 auto; 

    img { 
    margin: 0 auto; 
    } 
} 



.halfwidth { 
    display: inline-block; 
    width:50%; 
    position: relative; 
} 


.second-part-form { 
    label { 
    color: #ffffff; 
    } 
    h3{ 
    color: #ffffff; 
    } 
}

そしてこれはhtmlです：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <title>Join Now &dash; Sweety &amp; Co. Pro</title> 



     <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900' rel='stylesheet' type='text/css'> 
     <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> 

     <link rel="stylesheet" href="/static/bower_components/bootstrap/dist/css/bootstrap.min.css"> 

     <link rel="stylesheet" href="/static/css/base.css"> 




     <script src="/static/bower_components/jquery/dist/jquery.min.js"></script> 
     <script src="/static/js/base.js"></script> 


</head> 

<body> 

<div class="top-header"> 
    <div class="row"> 
     <div class="header col-md-6"> 

      <a href="/"><img id="header-logo" src="/static/img/logo_escuro.svg" width="314" height="81"></a> 
     </div> 

     <div class="col-md-6" id="div-header-menu"> 
      <ul class="header-menu list-inline " id="nav"> 
       <li class="header-menu-item"><a class="" href="/"><span>Home</span></a></li> 
       <li class="header-menu-item"><a href="#" class=""><span>Features</span></a> </li> 
       <li class="header-menu-item"><a href="#" class=""><span>Pricing</span></a></li> 
       <li class="header-menu-item"><a href="#" class=""><span>Help</span></a> </li> 
       <li class="header-menu-item"><a href="#" type="button" role="button" 
               id="button" class="button">JOIN NOW</a> </li> 
       <li class="header-menu-item"><a href="/auth/login" class=""><span>Sign in</span></a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

<div class="container "> 
    <div> 
     <div class="container"> 
      <div class="row presentation-header"> 

       <div id="slogan" class=""> 


    <h2>Because</h2> 
    <h2>you can't</h2> 
    <h2>create</h2> 
    <h2>money</h2> 


    <div style="margin: 50px"></div> 

    <div class=""> 
     <a id="sign-in-button" href="/auth/login" role="button" type="button">Sign in &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#62;</a> 
    </div> 

    <div style="clear: both"></div> 

       </div> 


       <div id="slogan-img" class=""> 

    <img id="slogan-image" src="/static/img/mac2.png"> 
     <p style="margin-bottom: 50px"></p> 


       </div> 
      </div> 

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

<div class="container diagonal-line-box"> 

     <div class="container"> 
      <div class="row"> 



      </div> 
     </div> 

</div> 

<div class="content-body"> 
    <div class="container"> 
     <div class="row"> 
      <section class=""> 

    <div class="container"> 
     <section class="row "> 
      <h3 class="col-md-5">Features<p class="span-decoration"></p></h3> 
     </section> 

     <h4>Get to know SweetyPro & Co. Features</h4> 

     <section> 
      <img class="cashflow" src="/static/img/cashflow_144.png"> 

      <div class="cashflow-text"> 
       <h1 class="title ">Cashflow</h1> 
       <p class="title-body">Organize your expenses and incomes in a platform easy to use.</p> 
       <p class="title-body">Enough of losing control of the situation, your payments and outputs are always on time.</p> 
      </div> 
     </section> 

     <div style="clear: both;"></div> 

     <section> 
      <div class="budget-text"> 
       <h1 class="title " style="text-align: right">Budgets</h1> 
       <p class="title-body" style="text-align: right"> 
        Can you imagine creating budgets with just a few steps? Yes! It's possible. 
       </p> 
       <p class="title-body" style="text-align: right"> 
        Sweety & Co. Pro helps you figure out how much to charge and making budgets turned into novice task. 
       </p> 
      </div> 
      <img class="budget" src="/static/img/budget_144.png"> 
     </section> 

     <div style="clear: both;"></div> 

     <section class="row"> 
      <div class="col-md-12"> 
       <h1 class="title">Timeline</h1> 
       <p class="title-body">Time is money. Thus organize yourself and your time and don't stop until you earn money.</p> 
      </div> 
      <img class="col-md-12" src="/static/img/timeline_144.png"> 
     </section> 

     <section class="row padding"> 
      <div class="col-md-12"> 
       <h1 class="title" style="text-align: center">Fastcreate</h1> 
       <p class="title-body" style="text-align: center">Running out of time? With a simple mouse click, you get access to foremost features of 
        Sweety & Co. Pro. in any gadget at any time.</p> 
      </div> 
      <img class="col-md-12" src="/static/img/fastcreate_144.png"> 
     </section> 

     <section class="row"> 
      <h3 class="col-md-5">Join now<p class="span-decoration"></p></h3> 
     </section> 
     <h4>The Status of Liberty Enlightening the World was a gift of the people of France...</h4> 

    </div> 


      </section> 
     </div> 
    </div> 
</div> 

<div class="container second_diagonal-line-box"> 
    <div> 
     <div class="container"> 
      <div class="row"> 
       <section class="col-md-12"> 



       </section> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="container post-content"> 
    <div class="container"> 
     <section class="col-md-offset-1"> 

    <div id="post-content-div" class="container"> 
     <div id="wrapper" class=" wrapper box "> 
      <div class="first-part-form"> 
       <h1 class="form-first-left" style="color: #FFFFFF;">Get your time and money on track</h1> 
       <img class="" style="padding-top: 10px; padding-left: 25px" src="/static/img/price.png"> 
      </div> 
      <div style="clear: left"></div> 
      <div class="second-part col-md-6 col-sm-12"> 
       <h3>Payment method</h3> 
       <p class="span-decoration"></p> 
       <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 

       <select > 
        <option>Credit Card</option> 
        <option>Paypal</option> 
       </select> 
      </div> 

      <form method="post" role="form"> 
       <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1471534484##5376f5b3fac93b1e7f29c731c668293a456aca13"></div> 
       <div class="first-part-form"> 

        <div class="form-first-left"> 
         <label for="name">First Name</label> 
         <input id="name" name="first_name" placeholder="John" required type="text" value=""> 
        </div> 

        <div class="form-first-right"> 
         <label for="surname">Last Name</label> 
         <input id="surname" name="last_name" placeholder="Smith" required type="text" value=""> 
        </div> 

        <div style="clear: both"></div> 
        <div class="form-first-left"> 

         <label for="login-or-company" id="login-or-company-label">Login (company's name or yours)</label> 
         <input class="col-md-6" id="login-or-company" name="username" required type="text" value=""> 
         <p id="login-url" class="col-md-2">.sweetyand.co</p> 

        </div> 

        <div class="form-first-right"> 
         <label for="password">Password (min. 6 characters)</label> 
         <input id="password" name="password" placeholder="******" required type="password" value=""> 

        </div> 
        <div style="clear: both"></div> 
        <div class="form-first-left"> 

         <label for="email">Email</label> 
         <input id="email" name="email" placeholder="[email protected]" required type="email" value=""> 

        </div> 

        <div class="form-first-right"> 
         <label for="reemail">Re-email</label> 
         <input id="reemail" name="re_email" placeholder="[email protected]" required type="email" value=""> 
        </div> 

       </div> 

       <div class="second-part-form row"> 
        <div class="col-md-6"> 

         <div class="row"> 
          <label class="col-md-offset-1" style="margin-top: -30px">You chose</label> 
          <h3 class="col-md-offset-1" id="dropdown-option">Credit Card</h3> 
         </div> 

         <div class="row"> 


          <label class="col-md-offset-1" for="credit-card-name">Name as in credit card</label> 
          <input class="col-md-12 col-md-offset-1" id="credit-card-name" name="credit_card_name" required type="text" value=""> 
         </div> 

         <div class="row"> 


          <label class="col-md-offset-1" for="credit-card-number">Credit card number</label> 
          <input class="col-md-9 col-md-offset-1" id="credit-card-number" name="credit_card_number" required type="text" value=""> 
         </div> 

         <div class="row"> 
          <div class="row"> 


           <label class="col-md-4 col-md-offset-1" for="validate">Validate</label> 
           <label class="col-md-4 col-md-offset-3" for="cvc">CVC/CW</label> 
          </div> 


          <input class="col-md-3 col-md-offset-1" id="validate" name="month_card" placeholder="MM" required type="text" value=""> 

          <input class="col-md-3" id="year" name="year_card" placeholder="YYYY" required type="text" value=""> 


          <input class="col-md-4 col-md-offset-1" id="cvc" name="cvc" required type="text" value=""> 
         </div> 

         <div class="row"> 
          <p class="col-md-1"></p> 

          <input class="col-md-1 col-md-offset-2" id="accept_terms" name="accept_terms" required type="checkbox" value="y"> 
          <p style="margin-left: 10px; color: white">I accept the terms of SweetyPro.</p> 
         </div> 

         <div class="row"> 

          <input class="col-md-6 col-md-offset-1" id="submit" name="submit" type="submit" value="Next      &gt;"> 
         </div> 
        </div> 
       </div> 

      </form> 
      <div class="form-first-left"> 
       <img id="logo-form" src="/static/img/logo.svg" class="" width="200" height="71"> 
      </div> 

      <div class="form-first-right"> 
       <input id="next" class="" type="button" value="Next&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#62;"> 
      </div> 

      <div class="row" id="flash"> 
       <div class="col-md-offset-6"> 

       </div> 
      </div> 
      <div style="clear: both;"></div> 

     </div> 
    </div> 


     </section> 
    </div> 
</div> 

<div class="footer container"> 
    <div class="container"> 
     <img id="foot-logo" class="col-md-12" src="/static/img/sco.svg" width="129" height="79"> 
    </div> 
</div> 


</body> 
</html>

出典

2016-08-18 wagnerdelima

あなたには、いくつかのコード、またはAを投稿することができますリンク？ – Vcasso

背景サイズ：100％; –

これまでいくつかのコードを試してみてください。 –

は、これは単純なトピックです：

@media (max-width: 800px) { 
    /* CSS that should be displayed if width is equal to or less than 800px goes here */ 
}

出典

2017-01-19 05:06:15 Beaudene

画面解像度変更のdiv幅を固定

答えて

関連する問題