While text-align is right padding-right does not affect,why?

Hello,

I have a div and its css but padding-right does not affect,you can see its fiddle in this link:

https://jsfiddle.net/jamshidi/fj41mt5w/

Thanks for your help
MOSTAGHASSIAsked:
Who is Participating?
 
pradeep kumarConnect With a Mentor Sr. UI Developer Commented:
just change the float to right or "box-sizing: border-box;" as suggest by cwareindia also good solution.

.article-detail-section-name{
	width:100%;
	height:auto;
	float:right;
	text-align:right;
	font-family:Tahoma;
	font-size:18px;
	padding-right:85px;
	margin-top:50px;

}

Open in new window

0
 
Terry WoodsIT GuruCommented:
It seems that the width set to 100% adding padding to the right pushes the width of the div out to be larger than the viewport width.

See what it looks like now that I've added a border:
https://jsfiddle.net/85z6toqm/
0
 
CWareIndiaConnect With a Mentor Commented:
Add the following to your CSS to fix this.  

box-sizing: border-box;
1
 
MOSTAGHASSIAuthor Commented:
Thanks for both solutions.
0
All Courses

From novice to tech pro — start learning today.