CODEWITHSUNDEEP
htmlcss
Vladislav Kosovskikh
Vladislav Kosovskikh

Reputation: 476

Why is the right padding ignored near scroll bar and how to fix this in my case?

enter image description here

.outer {
  padding: 50px;
}

.inner {
  width: 500px;
  height: 1000px;
  border: 1px solid gray;
  margin: auto;
}
<div class="outer">
  <div class="inner">
    <div class="content">qwerty</div>
  </div>
</div>

As far as I am concerned, inline-block display isn't convenient, cause I want to center my inner div.

Upvotes: 0

Views: 1912

Answers (4)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

it's break down the right padding because right and left padding of outer div is 50+50=100px and your inner div width is 500px so when window screen is less then 600px outer div right padding break down and inner div width 500px takes its fixed width. In this case you can use media query or max-width method. you also set width to 50% or 100% no media query no max-width need to be set.

Here is solution with max-width method 

body{
  margin:0;
}
.outer {
  padding: 50px;
  border: 1px solid red;
}

.inner {
   max-width: 500px;
  height: 1000px;
  border: 1px solid gray;
  margin:0 auto;
}
<div class="outer">
 <div class="inner"> 
   <div class="content">qwerty</div>
 </div>
</div>

Upvotes: 1

Niss
Niss

Reputation: 116

Your .inner has a width:500px so it won't be less than that. To fix your issue:

.inner {
width: 100%;
max-width:500px;
}

fiddle: https://jsfiddle.net/4sk4bqxh/

Upvotes: 0

Tariq Javed
Tariq Javed

Reputation: 481

 Change the width 
<div class="outer">
      <div class="inner">
        <div class="content">qwerty</div>
      </div>
    </div>

.outer {
  padding: 50px;
 border:1px solid red;

}

.inner {
  width: 400px;
  height: 1000px;
  border: 1px solid gray;
  margin:0 auto
}

Fiddler https://jsfiddle.net/bpyfckn6/

Upvotes: 0

luukgruijs
luukgruijs

Reputation: 129

try adding this at the top of your style-sheet:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

also you should use

margin: 0 auto

for your inner div to center horizontally

Upvotes: 0

Related Questions