将@media 用于我的页面，现在当我在手机中查看它时，我得到了一个围绕背景的侧面空白页面

Question

所以我是新手，使用媒体查询，当我将它调整为不同的大小时，它在我的网络浏览器 (chrome) 中看起来不错，但是当我在 phone 中查看我的网站时，它看起来像 this.

这是网页：http://www.wagrita.ml/

Answer 1

您必须删除这些行中的 margin-left：

@media (max-width: 1368px)
.navbar-child img {
 /* margin-left: 135px; */
    width: 6%;
}

@media (max-width: 1024px)
.navbar-child img {
   /* margin-left: 75px; */
    width: 8%;
}
@media (max-width: 720px)
.navbar-child img {
   /* margin-left: 20px; */
}

Answer 2

只需根据设计更新 space

.navbar-parent {
    background-color: rgba(247, 107, 138, .6);
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
}

.navbar-child {
    display: flex;
    justify-content: space-between;
    padding-right: 25px;
}
.navbar-child a {
    text-decoration: none;
    color: white;
    margin-left: 20px;
}

@media (max-width: 1368px){
  .navbar-child li {
      display: flex;
      margin-left: 60px;
  }
  .navbar-child img {
      width: 20px;
  }
}

<div class="navbar-parent">
        <div class="title-container">
            <div class="navbar-title">
            </div>
        </div>
        <ul class="navbar-child">
            
            <li><img src="./img/home.svg"><a href="#">INICIO</a></li>
            
            <li><img src="./img/male.svg"><a href="#">CONTACTO</a></li>
        </ul>
    </div>

将@media 用于我的页面，现在当我在手机中查看它时，我得到了一个围绕背景的侧面空白页面

Using @media for my page and now i'm getting a side blank page that arounds the background when I look it in my mobile

html

css

media-queries