Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialscott venaglia
6,117 Pointshaving trouble with my margins css
hey guys I am working on a site at the moment I am fairly new to this and I cant seem to get it right i am not sure if its my margin or my image code below is link to what is going wrong and a copy of my CSS I am trying to make it so that the images on the right hand side dont end up getting cut off http://s736.photobucket.com/user/Scott_Venaglia/media/website_zpsm59ahvyg.jpg.html
body{overflow-x:hidden;position:relative;margin:0;padding:0;font-family:'Montserrat',sans-serif;font-weight:400;font-size:13px;line-height:20px;color:#555;background-color:#fff}a,input,select,textarea{vertical-align:top;outline:none !important;-webkit-appearance:none;-webkit-border-radius:0}::-webkit-input-placeholder{opacity:1 !important}:-moz-placeholder{opacity:1 !important}::-moz-placeholder{opacity:1 !important}:-ms-input-placeholder{opacity:1 !important}select:-moz-focusring{ color:transparent;outline:none !important; text-shadow:0 0 0 #000 !important;border:0 !important}textarea{resize:none}img{outline:0;vertical-align:top;border:0;width:100%;max-width:100.1%;height:auto}a{color:#272727;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}a:hover,a:focus{text-decoration:none;color:#fdf58b}.clear{clear:both;height:0;font-size:0}#page{overflow-x:hidden}section{padding:55px 0}.container{padding-left:30px;padding-right:30px}.margbot0{margin-bottom:0 !important}.margbot5{margin-bottom:5px !important}.margbot10{margin-bottom:10px !important}.margbot20{margin-bottom:20px !important}.margbot25{margin-bottom:25px !important}.margbot30{margin-bottom:30px !important}.margbot40{margin-bottom:40px !important}.margbot50{margin-bottom:50px !important}.margbot55{margin-bottom:55px !important}.margbot60{margin-bottom:60px !important}.margbot65{margin-bottom:65px !important}.margbot70{margin-bottom:70px !important}.margbot75{margin-bottom:75px !important}.margbot80{margin-bottom:80px !important}.margbot95{margin-bottom:95px !important}.margbot120{margin-bottom:120px !important}.pad0{padding:0 !important}.padbot0{padding-bottom:0 !important}.padbot10{padding-bottom:10px !important}.padbot20{padding-bottom:20px !important}.padbot30{padding-bottom:30px !important}.padbot40{padding-bottom:40px !important}.padbot50{padding-bottom:50px !important}.padbot60{padding-bottom:60px !important}.padbot70{padding-bottom:70px !important}.padbot80{padding-bottom:80px !important}.padbot85{padding-bottom:85px !important}.padtop0{padding-top:0 !important}.center{text-align:center}.right{text-align:right}.color_text{color:#fdf58b !important}.btn{display:inline-block;margin:0 3px 5px 0;padding:12px 20px;border:0;border-radius:0;box-shadow:none;text-transform:none;font-weight:400;line-height:20px;font-size:13px;color:#fff;text-shadow:none;border-radius:22px;background:#272727;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.btn:focus,.btn:hover{color:#fff;background-color:#fdf58b}.btn-active{color:#272727;background-color:#fdf58b}.btn-active:hover{background:#272727;color:#fff}.btn-white{background-color:#fff;color:#fdf58b}.btn-white:hover{background-color:#fdf58b;color:blue}.btn-lg{padding:12px 50px;font-size:16px}.btn-sm{padding:6px 20px 5px;font-size:12px}.btn-xs{padding:2px 15px 3px;font-size:11px}ul,ol{padding:0;margin:0}li{padding:0;margin:0;list-style:none}p{margin:0 0 20px}h1,h2,h3,h4,h5,h6{margin-top:0;font-family:'Montserrat',sans-serif;text-transform:none;font-weight:400;line-height:1.2;color:#272727}h1{margin:0 0 24px;font-size:50px}h2{margin:0 0 30px;font-size:41px}h3{margin:0 0 21px;font-size:36px}h4{margin:0 0 21px;font-size:28px}h5{margin:0 0 15px;font-size:22px}h6{margin:0 0 15px;font-size:17px}header{position:absolute;z-index:9999;left:0;top:100%;width:100%;padding:19px 0 22px;margin-top:-86px;transition:background 0.3s ease-in-out,padding 0.3s ease-in-out;-webkit-transition:background 0.3s ease-in-out,padding 0.3s ease-in-out}header.menu_fixed{position:fixed;top:0;margin:0;padding:10px 0;background-color:#272727}header .btn{float:right}header .btn:hover{color:#272727;background-color:#fff}.main_menu{float:left;padding:14px 0 11px}.main_menu li{display:inline-block;margin:0 55px 0 0}.main_menu li a{display:block;padding:0;text-transform:uppercase;font-weight:400;color:#fff}.main_menu li a:hover,.main_menu li.active a{color:#fdf58b}#home{position:relative;height:1080px;background-color:#272727}.flexslider.top_slider .slides li{background-repeat:no-repeat;background-size:cover;background-position:center center}.flexslider.top_slider .slides li.slide1{background-image:url(../images/slider/slide1.jpg)}.flexslider.top_slider .slides li.slide2{background-image:url(../images/slider/slide2.jpg)}.flex-direction-nav a{top:auto;bottom:100px}.flexslider.top_slider .flex-direction-nav a.flex-prev{left:50%;margin-left:-35px;background-color:rgba(255,255,255,0.3)}.flexslider.top_slider .flex-direction-nav a.flex-next{right:50%;margin-right:-35px;background-color:rgba(255,255,255,0.3)}.flexslider.top_slider .flex-direction-nav a:hover{background-color:#fdf58b}.flexslider .flex-direction-nav a i{display:block;text-align:center;line-height:29px;font-size:20px;color:#fff;transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}.flexslider .flex-direction-nav a:hover i{color:#272727}.flexslider.top_slider .container{position:relative}.top_slider_cap{position:absolute;left:30px;right:30px;top:50%;text-align:center;transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%)}.top_slider_cap img{width:auto !important;margin-left:auto;margin-right:auto}.top_slider_cap h1{margin:0 0 31px;text-transform:none;font-weight:300;line-height:35px;font-size:42px;color:#fdf58b;text-shadow:1px 1px 1px rgba(0,0,0,0.31)}.top_slider_cap p{margin:0 0 39px;line-height:25px;font-size:20px;color:#fff}.top_slider_cap .slide_btn{display:inline-block;margin:0;padding:18px 70px 17px;font-weight:400;line-height:20px;font-size:16px;color:#272727;border-radius:24px;background-color:#fdf58b}.top_slider_cap .slide_btn:hover{color:#272727;background-color:#fff}#gallery{padding:0}#gallery .gallery_wrap{margin-right:-250px}#gallery .gallery_img{overflow:hidden}.gallery_img.item1{width:32.14%}.gallery_img.item2{width:33.92%}.gallery_img.item3{width:33.92%}.gallery_img.item4{width:42.91%}.gallery_img.item5{width:23.15%}.gallery_img.item6{width:57.08%}.gallery_img.item7{width:21.54%}.gallery_img.item8{width:21.36%}#gallery .gallery_img img{transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}#gallery .gallery_img:hover img{transform:scale(1.05);-webkit-transform:scale(1.05)}#gallery .gallery_img:before{content:'';position:absolute;z-index:2;left:0;top:100%;width:100%;height:100%;background:-moz-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(125,185,232,0)),color-stop(30%,rgba(253,245,139,0.3)),color-stop(100%,rgba(253,245,139,1)));background:-webkit-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-o-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-ms-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:linear-gradient(to bottom,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8',endColorstr='#fdf58b',GradientType=0 );transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}#gallery .gallery_img:hover:before{top:0}#gallery .gallery_img a{position:absolute;z-index:3;left:0;top:80%;display:block;width:100%;text-transform:uppercase;text-align:center;line-height:28px;font-size:26px;opacity:0;transform:translateY(-50%);-webkit-transform:translateY(-50%)}#gallery .gallery_img:hover a{top:50%;opacity:1}#about{overflow:hidden;position:relative;padding:141px 0 102px}#about .about_img{position:absolute;left:0;top:0;bottom:0;width:55.4%;background-image:url(../images/about_img.jpg);background-repeat:no-repeat;background-size:cover;background-position:center center}#about .about_content{float:right;width:45.5%;padding:0 130px;text-align:center;line-height:25px}#services{padding-top:112px}.countdown{padding-bottom:94px}.countdown span{display:block;margin-bottom:20px;text-align:center;line-height:88px;font-size:103px;color:#fe5252}.countdown p{text-transform:uppercase;text-align:center}.services_content{position:relative;float:left;width:44%}.services_text{position:absolute;left:16%;right:16%;top:50%;text-align:center;transform:translateY(-50%);-webkit-transform:translateY(-50%)}.services_items_wrap{float:right;width:56%}.service_item{position:relative;display:inline-block;width:32.8%;text-align:center;line-height:25px;font-size:14px;color:#c8c8c8;perspective:1600px;-webkit-perspective:1600px}.service_item_front{padding:112px 30px 92px}.color1 .service_item_front{background-color:#272727}.color2 .service_item_front{background-color:#343434}.color3 .service_item_front{background-color:#3f3f3f}.service_item span{position:relative;display:block;margin-bottom:32px;padding-bottom:25px;line-height:54px;font-size:54px}.service_item.color1 span{color:#fdf58b}.service_item.color2 span{color:#dda71c}.service_item.color3 span{color:#fe5252}.service_item span:before{content:'';position:absolute;left:50%;bottom:0;margin-left:-15px;width:30px;height:3px}.service_item.color1 span:before{background-color:#4b4b4b}.service_item.color2 span:before{background-color:#595959}.service_item.color3 span:before{background-color:#656565}.service_item h4{margin-bottom:44px;text-transform:uppercase;line-height:29px;font-size:26px;color:#fff}.service_item .service_item_front{position:relative;z-index:24;transition:all 0.6s ease-in-out;-webkit-transition:all 0.6s ease-in-out}.service_item:hover .service_item_front{z-index:35;transform:rotateY(180deg);-o-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transition-delay:.2s;-webkit-transition-delay:.2s}.service_item .service_item_back{position:absolute;z-index:13;left:0;top:0;width:100%;height:100%;transform:rotateY(-180deg);-o-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);transition:all 0.6s ease-in-out;-webkit-transition:all 0.6s ease-in-out}.color1 .service_item_back{background-color:#272727}.color2 .service_item_back{background-color:#343434}.color3 .service_item_back{background-color:#3f3f3f}.service_item:hover .service_item_back{z-index:46;transform:rotateY(0deg);-o-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);transition-delay:.2s;-webkit-transition-delay:.2s}.service_item .service_item_back p{position:absolute;left:35px;top:50%;right:35px;transform:translateY(-50%);-webkit-transform:translateY(-50%)}.event_item{overflow:hidden;position:relative;float:left;width:25%}.event_item:before{content:'';position:absolute;z-index:2;left:0;top:100%;width:100%;height:100%;background:-moz-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(125,185,232,0)),color-stop(30%,rgba(253,245,139,0.3)),color-stop(100%,rgba(253,245,139,1)));background:-webkit-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-o-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:-ms-linear-gradient(top,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);background:linear-gradient(to bottom,rgba(125,185,232,0) 0%,rgba(253,245,139,0.3) 30%,rgba(253,245,139,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8',endColorstr='#fdf58b',GradientType=0 );transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}.event_item:hover:before{top:0}.event_item img{transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}.event_item:hover img{transform:scale(1.05);-webkit-transform:scale(1.05)}.event_descr{position:absolute;z-index:3;left:30px;right:30px;bottom:-100%;transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out}.event_item:hover .event_descr{bottom:0}.event_descr h4{margin-bottom:3px;font-weight:700;line-height:20px;font-size:18px}.event_descr .event_date{display:block;padding-bottom:21px;text-transform:uppercase;font-size:11px;color:#777}#contacts_inf{padding:47px 0 65px}#contacts_inf h4{margin-bottom:18px;line-height:20px;font-size:18px}footer{padding:38px 0 21px;color:#878787;background-color:#272727}footer #copyright{color:#fff}footer #copyright span{color:#fdf58b}
1 Answer
scott venaglia
6,117 PointsJeff Lemay thanks heaps for doing that Jeff for doing that did you do that formatting yourself or did you use a program or site ?
Jeff Lemay
14,268 PointsJeff Lemay
14,268 PointsFormatted: