Fixing div width for screen resolution changes - css

Question

I have a problem with my css and html code.
When I open the page normally it works, but when I change screen resolution, the .content-body class (the light blue with diagonal) does not fulfill the entire page width (there is that pink column). Could anyone help? Thank you.
That's the whole css code:
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;
}
}
And this is the 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 & 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">
<img id="header-logo" src="/static/img/logo_escuro.svg" width="314" height="81">
</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"><span>Features</span> </li>
<li class="header-menu-item"><span>Pricing</span></li>
<li class="header-menu-item"><span>Help</span> </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"><span>Sign in</span></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 ></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="john#example.com" required type="email" value="">
</div>
<div class="form-first-right">
<label for="reemail">Re-email</label>
<input id="reemail" name="re_email" placeholder="john#example.com" 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 >">
</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 >">
</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>

Answer 1

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