I am in the process of creating a webpage that spans 100% width using the foundation framework. Everything is going smoothly until I encounter an issue when trying to include a "div class="row" container.
My goal is to have two images side by side, occupying 8 columns and 4 columns respectively. These images should not have any padding on either side and should cover the entire screen. To achieve this, I have implemented the following code:
<div class="row collapse fullwidth">
<div class="large-8 medium-12 relative columns">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Portfolio</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Portfolio</h2>
</div>
</a>
</div>
</div>
This setup functions almost as expected, but it appears that the "row" element creates empty columns on the left and right sides of the page. I want to avoid this extra space. Yet, I cannot remove the padding by collapsing the columns without using the "row" class. It seems to be a trade-off between the two. I have tried various solutions like forcing full-width with additional code, but none of them have worked for me. Thus, I am open to alternative suggestions.
.fullwidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
Any assistance would be greatly appreciated. Thank you!