How can I set featured image full width (without margin)

Hello, I've create resposive grid posts loop following the guide in snipet section. It works like charm but I want to display featured image full width. Use Firefox's DOM, I found these:

<div class="tm-article-image" data-markup-id="beans_post_image"><a href="http://localhost/wordpress/?p=1011" title="Template: Featured Image (Horizontal)" data-markup-id="beans_post_image_link"><picture data-markup-id="beans_post_image_item_wrap"><source media="(max-width: 480px)" srcset="http://localhost/wordpress/wp-content/uploads/beans/images/featured-image-horizontal-2978a33.jpg" data-markup-id="beans_post_image_small_item"><img src="http://localhost/wordpress/wp-content/uploads/beans/images/featured-image-horizontal-4ea71c0.jpg" alt="Horizontal Featured Image" itemprop="image" data-markup-id="beans_post_image_item" width="405" height="235"></picture></a></div><header data-markup-id="beans_post_header"><h2 class="uk-article-title" itemprop="headline" data-markup-id="beans_post_title"><a href="http://localhost/wordpress/?p=1011" title="Template: Featured Image (Horizontal)" rel="bookmark" data-markup-id="beans_post_title_link"><!-- open output: beans_post_title_text -->Template: Featured Image (Horizontal)<!-- close output: beans_post_title_text --></a></h2><ul class="uk-article-meta uk-subnav uk-subnav-line" data-markup-id="beans_post_meta"><li data-markup-id="beans_post_meta_item[_date]"><!-- open output: beans_post_meta_item_date_text --><!-- open output: beans_post_meta_date_prefix -->Posted on <!-- close output: beans_post_meta_date_prefix --><time datetime="2012-03-15T15:15:12+00:00" itemprop="datePublished" data-markup-id="beans_post_meta_date"><!-- open output: beans_post_meta_date_text -->March 15, 2012<!-- close output: beans_post_meta_date_text --></time><!-- close output: beans_post_meta_item_date_text --></li><li data-markup-id="beans_post_meta_item[_author]"><!-- open output: beans_post_meta_item_author_text --><!-- open output: beans_post_meta_author_prefix -->By <!-- close output: beans_post_meta_author_prefix --><a href="http://localhost/wordpress/?author=2" rel="author" itemprop="author" itemscope="" itemtype="https://schema.org/Person" data-markup-id="beans_post_meta_author"><!-- open output: beans_post_meta_author_text -->Theme Buster<!-- close output: beans_post_meta_author_text --><meta itemprop="name" content="Theme Buster" data-markup-id="beans_post_meta_author_name_meta"></a><!-- close output: beans_post_meta_item_author_text --></li></ul></header><div itemprop="articleBody" data-markup-id="beans_post_body"><div class="tm-article-content" itemprop="text" data-markup-id="beans_post_content"><p>This post should display a <a title="Featured Images" href="https://en.support.wordpress.com/featured-images/#setting-a-featured-image" target="_blank">featured image</a>, if the theme <a title="Post Thumbnails" href="https://codex.wordpress.org/Post_Thumbnails" target="_blank">supports it</a>.</p>
<p>Non-square images can provide some unique styling issues.</p>
<p>This post tests a horizontal featured image.</p>
</div><span class="uk-text-small uk-text-muted uk-clearfix" data-markup-id="beans_post_meta_categories"><!-- open output: beans_post_meta_categories_prefix -->Filed under: <!-- close output: beans_post_meta_categories_prefix --><a href="http://localhost/wordpress/?cat=50" rel="category">Template</a>, <a href="http://localhost/wordpress/?cat=1" rel="category">Uncategorized</a></span><span class="uk-text-small uk-text-muted uk-clearfix" data-markup-id="beans_post_meta_tags"><!-- open output: beans_post_meta_tags_prefix -->Tagged with: <!-- close output: beans_post_meta_tags_prefix --><a href="http://localhost/wordpress/?tag=codex" rel="tag">Codex</a>, <a href="http://localhost/wordpress/?tag=edge-case" rel="tag">edge case</a>, <a href="http://localhost/wordpress/?tag=featured-image" rel="tag">featured image</a>, <a href="http://localhost/wordpress/?tag=image" rel="tag">image</a>, <a href="http://localhost/wordpress/?tag=template" rel="tag">template</a></span></div>

The CSS are:

article > .tm-article-image:first-child, article header > .tm-article-image:first-child {
    margin-top: 0;
}

and

.tm-article-image {
    margin-top: 22.5px;
    margin-bottom: 22.5px;
}

To remove the margin and display it as full width, I add this line to .tm-article-image

margin: -25px -25px 15px -25px;

Unfortunately, the top margin still exist that affeacted by the first CSS rule above. Could you give me some advises or better solution to make it done? Thanks

Currently, I'm using the code below, but I think it's dirty way.

article > .tm-article-image:first-child, article header > .tm-article-image:first-child {
    margin: -25px -25px 15px -25px !important;
}

I've managed to make this works by add class to it.

beans_add_attribute( 'beans_post_image_item', 'class', 'uk-width-large-1-1' );

note: uk-width-large-1-1 is width:100% . hope it will works for you also 🙂