[英]i have a margin on the left of my site and i dont know how to get rid of it or where it came from
嘿伙计们，我正在制作我的网站的移动版本，在我的网格容器的左侧，我有一些白边。 当 scope 用于桌面时，网格位于中心。 我想要的是让我的网格在最左边。 任何帮助，将不胜感激。
* { padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body { background: #fff; font-family: 'Inter', sans-serif; } header { padding: 0 35px; display: flex; justify-content: space-between; align-items: center; }.header-logo { text-decoration: none; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 600; font-size: 20px; line-height: 28px; color: #28352f; }.greet { background: #fff url(background.png) no-repeat; display: flex; flex-direction: column; align-items: center; text-align: center; }.hi-there { margin-right: 2.8em; font-family: 'Inter', sans-serif; font-style: normal; font-weight: bold; font-size: 40px; line-height: 52px; color: #172b4d; margin-top: 0; margin-bottom: 0; }.text-box { margin-top: 3em; }.hi-there2 { color: #36b37f; margin-top: 1.7em; margin-right: 2em; font-family: 'Inter', sans-serif; font-style: normal; font-weight: bold; font-size: 40px; line-height: 52px; margin-right: 2.8em; margin-top: 0; margin-bottom: 0; }.paragraph1 { font-size: 20px; line-height: 28px; margin: 2em 24px; text-align: center; color: #172b4d; word-wrap: break-word; }.icon-row { padding: 0; display: flex; justify-content: center; width: 170px; margin: 3px; } li { margin: 8px; list-style: none; }.grid-containers { margin-right: 30px; }.container { width: 327px; height: 474px; border-radius: 8px; font-weight: bold; display: grid; grid-template-rows: 1fr; border-color: #d0d9d4; border-width: 1px; border-style: solid; margin-top: 30px; margin-left: 20px; align-content: space-around; justify-content: space-between; margin-right: 20px; }.column1 { background-color: #d0d9d4; }.column2 { background-color: white; }.languages li { display: inline-block; }.ruby { border-style: none; border-radius: 5px; background-color: #ebf0ee; padding: 8px; }.css { border-style: none; border-radius: 5px; background-color: #ebf0ee; padding: 6px; }.js { border-style: none; border-radius: 5px; background-color: #ebf0ee; padding: 6px; }.html { border-style: none; border-radius: 5px; background-color: #ebf0ee; padding: 6px; }.ruby:hover { text-decoration: underline rgb(6, 14, 243); border: 1px solid rgb(6, 14, 243); }.css:hover { text-decoration: underline rgb(6, 14, 243); border: 1px solid rgb(6, 14, 243); }.js:hover { text-decoration: underline rgb(6, 14, 243); border: 1px solid rgb(6, 14, 243); }.html:hover { text-decoration: underline rgb(6, 14, 243); border: 1px solid rgb(6, 14, 243); }.project-name1 { font-weight: bold; font-size: 36px; line-height: 32px; color: #3a4a42; margin-left: 25px; margin-top: 20px; }.project-name-two { font-weight: bold; font-size: 35px; line-height: 32px; color: #3a4a42; margin-left: 60px; margin-bottom: 20px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title></title> </head> <body> <body> <header> <a href="/" class="header-logo"> <h3>Welcome</h3> </a> <nav> <img src="Union.png" alt="menu link" /> </nav> </header> <section class="greet"> <div class="text-box"> <h1 class="hi-there">Hey there, I'm <br />David</h1> <h2 class="hi-there2"> I'm a software <br /> developer </h2> </div> <p class="paragraph1"> I can help you build a product, feature or website Look through some of my work and experience. If you like what you see and have a project you need coded: don't hestiate to contact me. </p> <ul class="icon-row"> <li> <div class="tweet-connect"> <a href="https.//twitter.com/david630"><img class="tweet" src="twitter:svg" alt="twitter picture" /></a> </li> <li> <img class="med" src="medium.svg" alt="medium picture" /> </li> <li> <a href="https.//github.com/david63011"><img class="git" src="github.svg" alt="git picture" /></a> </li> <li> <img class="angel" src="angellist.svg" alt="angelist picture" /> </li> <section class="grid-containers"> <div class="container"> <div class="column1"></div> <div class="column2"> <div class="project-box"> <h1 class="project-name1">Multi-Post Stories</h1> <h1 class="project-name-two">Gain+Glory</h1> </div> <div class="languages"> <ul> <li class="ruby">Ruby on Rails</li> <li class="css">css</li> <li class="js">JavScript</li> <li class="html">HTML</li> </ul> </div> <button type="submit" class="see-project-btn">See Project</button> </div> </div> </body> </html>
我试过删除边距和填充，但我不确定我能做些什么来解决这个问题
我认为您需要专注于改进代码：
* { padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body { background: #fff; font-family: "Inter", sans-serif; } header { padding: 0 35px; display: flex; justify-content: space-between; align-items: center; }.header-logo { text-decoration: none; font-family: "Inter", sans-serif; font-style: normal; font-weight: 600; font-size: 20px; line-height: 28px; color: #28352f; }.greet { background: #fff url(background.png) no-repeat; display: flex; flex-direction: column; align-items: center; text-align: center; }.hi-there { margin-right: 2.8em; font-family: "Inter", sans-serif; font-style: normal; font-weight: bold; font-size: 40px; line-height: 52px; color: #172b4d; margin-top: 0; margin-bottom: 0; }.text-box { margin-top: 3em; }.hi-there2 { color: #36b37f; margin-top: 1.7em; margin-right: 2em; font-family: "Inter", sans-serif; font-style: normal; font-weight: bold; font-size: 40px; line-height: 52px; margin-right: 2.8em; margin-top: 0; margin-bottom: 0; }.paragraph1 { font-size: 20px; line-height: 28px; margin: 2em 24px; text-align: center; color: #172b4d; word-wrap: break-word; }.icon-row { padding: 0; display: flex; justify-content: center; width: 170px; margin: 3px; } li { margin: 8px; list-style: none; }.grid-containers { margin-right: 30px; }.container { width: 327px; height: 474px; border-radius: 8px; font-weight: bold; display: grid; grid-template-rows: 1fr; border-color: #d0d9d4; border-width: 1px; border-style: solid; margin-top: 30px; margin-left: 20px; align-content: space-around; justify-content: space-between; margin-right: 20px; }.column1 { background-color: #d0d9d4; }.column2 { background-color: white; }.languages li { display: inline-block; }.ruby { border-style: none; border-radius: 5px; background-color: #ebf0ee; padding: 8px; }.css { border-style: none; border-radius: 5px; background-color: #ebf0ee; padding: 6px; }.js { border-style: none; border-radius: 5px; background-color: #ebf0ee; padding: 6px; }.html { border-style: none; border-radius: 5px; background-color: #ebf0ee; padding: 6px; }.ruby:hover { text-decoration: underline rgb(6, 14, 243); border: 1px solid rgb(6, 14, 243); }.css:hover { text-decoration: underline rgb(6, 14, 243); border: 1px solid rgb(6, 14, 243); }.js:hover { text-decoration: underline rgb(6, 14, 243); border: 1px solid rgb(6, 14, 243); }.html:hover { text-decoration: underline rgb(6, 14, 243); border: 1px solid rgb(6, 14, 243); }.project-name1 { font-weight: bold; font-size: 36px; line-height: 32px; color: #3a4a42; margin-left: 25px; margin-top: 20px; }.project-name-two { font-weight: bold; font-size: 35px; line-height: 32px; color: #3a4a42; margin-left: 60px; margin-bottom: 20px; }
<header> <a href="/" class="header-logo"> <h3>Welcome</h3> </a> <nav> <img src="Union.png" alt="menu link" /> </nav> </header> <section class="greet"> <div class="text-box"> <h1 class="hi-there">Hey there. I'm <br />David</h1> <h2 class="hi-there2"> I'm a software <br /> developer </h2> </div> <p class="paragraph1"> I can help you build a product, feature or website Look through some of my work and experience, If you like what you see and have a project you need coded. don't hestiate to contact me: </p> <ul class="icon-row"> <li> <div class="tweet-connect"> <a href="https.//twitter.com/david630"><img class="tweet" src="twitter.svg" alt="twitter picture" /></a> </div> </li> <li> <img class="med" src="medium:svg" alt="medium picture" /> </li> <li> <a href="https.//github.com/david63011"><img class="git" src="github.svg" alt="git picture" /></a> </li> <li> <img class="angel" src="angellist.svg" alt="angelist picture" /> </li> </ul> </section> <section class="grid-containers"> <div class="container"> <div class="column1"></div> <div class="column2"> <div class="project-box"> <h1 class="project-name1">Multi-Post Stories</h1> <h1 class="project-name-two">Gain+Glory</h1> </div> <div class="languages"> <ul> <li class="ruby">Ruby on Rails</li> <li class="css">css</li> <li class="js">JavScript</li> <li class="html">HTML</li> </ul> </div> <button type="submit" class="see-project-btn">See Project</button> </div> </div> </section>
该网站的左侧有一个“ 1”。 我不知道它从哪里来
[英]There's a “1” at the left side of the site. I do not know where it came from
我想在导航栏中为我的链接留出margin:left，但我不希望border-bottom 移动。 我该怎么做？
[英]I want to have margin:left for my a links in navbar, but i dont want border-bottom to move. How can I do it?
如何在bootstrap中摆脱我的jumbotron底部边缘？
[英]How do I get rid of the margin on the bottom of my jumbotron in bootstrap?
我正在尝试从 HTML 文件中获取文本，但我不知道如何（谷歌搜索但 idk 去哪里看）
[英]I am trying to get text from an HTML file, but I dont know how(googled but idk where to look)
我的网页底部有一个不必要的空白，它是从哪里来的，我该如何摆脱它？
[英]There's an unnecessary white space at the bottom of my webpage, where is it coming from and how can I get rid of it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.