Question

每个人。

练习css技能，无法摆脱页面右侧的空白。我尝试将min-width：100％应用于html，body和div，并尝试将padding设置为0，但仍然无法正常工作。

我想念什么？

这是我的笔：

https://codepen.io/s4ek1389/pen/aaBxQq?editors=1100

当前在桌面版本上工作

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;
}

无法摆脱右边的填充

0 个答案: