pmcartney2
New Member
I think something is over riding the styling of my text but im not too sure what it is. In my code i have "#column-right" and "#column-right h1" and it is styling correctly. Now im trying to style the paragraphs text. I have "#full_width" and "#full_width p" however i cant get the p to style correctly. What is the problem with my code that is causing this issue?UPDATE:It should look like this: Screenshot 1It looks like this: Screenshot 2INB4: I will be pulling the style out into an external sheet after the build is done.<!DOCTYPE html><html><head><style>/** -------------------------------MAIN - DON'T EDIT---------------------------------- **/html {max-width:56em;margin:0 auto;padding:1.25em;font:100% "Helvetica Neue",sans-serif;color:#222;background:#e2e7e8;}* {margin: 0;padding: 0;}.clear { clear:both; }/** ---------------------------HEADER COLUMN LEFT------------------------------------- **/#headermanager {-webkit-box-shadow:0px 5px 10px #1c1c1c;-moz-box-shadow:0px 5px 10px #1c1c1c;box-shadow:0px 5px 10px #1c1c1c;}#column-left {width: 230px;float: left;padding-top:20px;padding-left:20px;padding-bottom:20px;background:rgba(255,255,255,0.75);}* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}.pic { border: 10px solid #fff; float: left; height: 180px; width: 180px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111; box-shadow: 5px 5px 5px #111; }.morphimg { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}.morphimg:hover {border-radius: 50%;-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }/** -------------------------------HEADER COLUMN CENTER------------------------------- **/#column-center {background:rgba(255,255,255,0.75);width: 316px;float: left;padding-top:20px;padding-left:20px;padding-bottom:20px;}/** ---------------------------------HEADER COLUMN RIGHT------------------------------ **/#column-right {text-align:right;background:rgba(255,255,255,0.75);width: 310px;float:right;padding-top:20px;padding-right:20px;padding-bottom:20px;}#column-right h1 {font-size:3em;font-weight:200;text-align:right;width: 310px;float:right;} #column-right h2 {font-size:1.3em;font-weight:100;text-align:right;width: 310px;float:right;} #column-right h3 {font-size:0.9em;font-weight:200;text-align:right;width: 310px;float:right;} #progress_bar {background:rgba(255,255,255,0.75);width: 310px;}/** -----------------------------------SECTION HEADERS-------------------------------- **/#section_header {background: #e94939;padding: 1rem; }#section_header h1 {font-size: 0.65em;font-weight: 500;letter-spacing: 0.35em;text-transform: uppercase;color: white;text-align: center;/** ---------------------------------------------------------------------------------- **//** -------------------------------------TEXT LAYOUTS--------------------------------- **//** ---------------------------------------------------------------------------------- **//** --------------------------------------ABOUT ME------------------------------------ **/#full_width{ padding-left:7.8em;padding-right:7.8em;padding-top:2.85em;padding-bottom:2.85em;background:rgba(255,255,255,0.75);}#full_width p { text-align:left;font-size:0.8em;font-weight:200;}</style></head><body><!--***********************************************************************************--> <!--********************************* HEADER STARTS ***********************************--> <!--***********************************************************************************--> <!----------------------------------COLUMN LEFT STARTS-----------------------------------> <div id="column-left"> <div class="morphimg pic"> <img src="http://i50.tinypic.com/11r4nwh.png" alt="beach"> </div> </div> <!------------------------------- COLUMN CENTER STARTS ----------------------------------><div id="column-center">Social Hover</div><!----------------------------------COLUMN RIGHT STARTS----------------------------------> <div id="headermanager"><div id="column-right"> <h1>John Doe</h1> <h2>lipsium ordium consecultar</h2> <h3>www.jdoedesign.com<br> [email protected]<br> 256-220-8360<br> 141 Ritter Street Huntsville, AL 35816</h3> </div> <div class="clear"></div> </div><div id="section_header"><h1>Hello World</h1></div><div id="full_width"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dui lorem, dictum non varius eget, accumsan ut tellus. Mauris sed nunc vitae lectus egestas aliquam eu eu libero. Cras tempus euismod interdum. Aenean rutrum orci nec mauris venenatis eu blandit est eleifend. Cras elit magna, tempus eu luctus quis, dapibus et purus. Suspendisse et quam ut est interdum porta. Morbi sed rhoncus risus. Pellentesque eu libero justo, at varius purus. Duis faucibus ultrices ipsum vitae eleifend. Suspendisse viverra congue dolor faucibus feugiat. Etiam pulvinar congue tellus sit amet dapibus. Morbi et ultricies diam. Suspendisse id vehicula lacus. Integer quis risus diam, a facilisis justo.<br><br>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed lobortis aliquet lorem, at placerat orci fermentum non. Nam ut tortor eu eros gravida semper. Cras eget est ante. Sed vehicula justo et urna lacinia volutpat. Vestibulum dolor ante, sollicitudin vel ultricies nec, mattis non urna. Donec eget lorem ligula, quis ornare odio</p></div><!--***********************************************************************************--> <!--******************************** ABOUT ME STARTS **********************************--> <!--***********************************************************************************--> <!--***********************************************************************************--> <!--***************************** WORK EXPERIENCE STARTS ******************************--> <!--***********************************************************************************--><!--***********************************************************************************--> <!--******************************** EDUCATION STARTS *********************************--> <!--***********************************************************************************--> <!--***********************************************************************************--> <!--***************************** TECHNICAL SKILLS STARTS *****************************--> <!--***********************************************************************************--><!--***********************************************************************************--> <!--********************************** AWARDS STARTS **********************************--> <!--***********************************************************************************--> <!--***********************************************************************************--> <!--********************************** CONTACT STARTS *********************************--> <!--***********************************************************************************--> </body></html>