HorizontalPager not taking full width while scrolling in Compose

I am using a ComposeView in an xml and loading a HorizontalViewPager in that view. My expected behaviour of that pager is when I scroll the items of that pager it should not be inside the bound of the padding of the parent layout but take the edge to edge scrolling instead. Here is the current look:

But I want something like this:

This is how I am getting the viewpager:

HorizontalPager(
                count = promotionalBanners.size,
                state = pagerState,
                itemSpacing = 8.dp,
                contentPadding = PaddingValues(end = 16.dp)
            ) {

                Card(
                    Modifier
                        .fillMaxWidth()
                        .height(172.dp)
                ) {
                    NetworkImage(
                        modifier = Modifier
                            .fillMaxSize()
                            .aspectRatio(1.8f)
                            .clip(RoundedCornerShape(4.dp))
                            .clickable {
                                context.openUrl(
                                    promotionalBanners[it].redirectUrl,
                                    navController
                                )
                            },
                        imageUrl = promotionalBanners[it].bannerUrl,
                        contentDescription = promotionalBanners[it].redirectUrl,
                        contentScale = ContentScale.FillBounds
                    )
                }
            }

Can any one suggest me how can I achieve that?