Leon Laci Leon Laci - 2 months ago 8x
Sass (Sass) Question

Child ignore parents padding

I have a portfolio item with an image, it is places within a section that has padding left and right. The problem is that I need the image to be to the edges and ignore section padding. I tried adding negative margin and some tricks I found on stackoverflow with padding but it didn't work, it just centered the image with more padding/margin.


<section id="portfolio">

<!-- Section title -->
<h2 class="section-title">Portfolio</h2>
<!-- Section description -->
<p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<!-- Grid layout -->
<ul class="portfolio-grid">
<!-- Item -->
<li class="portfolio-grid-item">
<!-- Item link -->
<a href="#" class="portfolio-grid-item-link">
<!-- Item image -->
<img src="http://placekitten.com/400/400" alt="Image">
<!-- Item overlay -->
<span class="portfolio-grid-item-overlay"></span>
<!-- Item name -->
<span class="portfolio-grid-item-name">Item name</span>



By default, <body> has margins on all browsers. So all you need to do is shave them off:


If you want a bit of padding-left on your text, write to specific elements where you want padding. Don't write to <section> , as it adds padding to all elements you have inside there!

Fiddle: https://jsfiddle.net/9mg03wa5/2/