Even after setting the padding and margin in the parent container to 0, the image is still not filling to the edges. Here is the image. This snippet of code shows my JavaScript file:
import styles from './css/Home.module.css';
export default function home()
{
return(
<>
<div className= {styles.container}>
<div className= {styles.pictures}>
<img src = "../pictures/home.jpg"/>
</div>
</div>
</>
)
}
This excerpt displays my CSS file:
.container{
/* position: absolute;
display: flex;
justify-content: center;
margin:0;
padding:0;
height: 100%;
width: 100%; */
margin: 0;
padding: 0;
}
.container .pictures img{
/* max-width: 100%;
max-height: auto;
margin-right: 10%;
padding: 0px;
border: 10px solid orange;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px; */
margin-right: 20px;
}
I have been struggling with this issue for two days now. Despite resetting the padding and margin values to 0 in the parent container, no changes are visible. Additionally, attempts to adjust the picture's positioning with margin-right have proven futile. I am perplexed as to what may be causing this issue in my code.