everyone.
Practicing my css skills and I can't get rid of the padding on the right of my page. I've tried applying min-width: 100% to the html, body and the divs and tried setting padding to 0, but it still doesn't work.
What am I missing?
Here's my pen:
https://codepen.io/s4ek1389/pen/aaBxQq?editors=1100
Currently working on the desktop version
HTML
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div id="main">
<div id="nested">
<div id="inside">
<div class="label"><p class="tag">AUTHOR</p></div>
<h1 class="headline">John Steinbeck</h1>
<div class="image_mobile"><img src="https://st.kp.yandex.net/images/actor_iphone/iphone360_119126.jpg"></div>
<p class="text">John Ernst Steinbeck Jr. (/ˈstaɪnbɛk/; February 27, 1902 – December 20, 1968) was an American author. He won the 1962 Nobel Prize in Literature "for his realistic and imaginative writings, combining as they do sympathetic humour and keen social perception."[2] He has been called "a giant of American letters," and many of his works are considered classics of Western literature.[3]</p>
<div class="link"><a>Full Bio</a></div>
</div>
</div>
<div id="two">
<img class="image_desktop" src="https://st.kp.yandex.net/images/actor_iphone/iphone360_119126.jpg">
</div>
</div>
</body>
CSS
html {
min-width: 100%;
min-height: 100%;
}
body {
background: linear-gradient(300deg, #00ADB5, #9DDBDE) no-repeat;
text-align: center;
font-family: Roboto;
width: 100%;
min-width: 100%;
}
#main {
margin: 0 auto;
display: grid;
min-width: 100%;
grid-template-columns: repeat(12, minmax(10px, auto));
grid-template-rows: repeat(12, minmax(10px, auto));
}
#nested {
grid-column: 2/12;
grid-row: 3/11;
background: #fff;
}
