为什么我的网站屏幕分辨率不适合移动设备的屏幕尺寸？

Question

所以起初分辨率与移动设备的宽度完全匹配，但是在更改背景图像后，由于某些奇怪的原因，宽度突然不适合现在的设备长度。我尝试将分支重置为分辨率良好但仍然不起作用的点。

编辑：

正如您在我的屏幕上看到的那样，屏幕右侧有一些白色 space，我正在尝试删除该部分。

它似乎也不是边距或填充问题，因为 html 实体本身不符合设备的宽度

谁能帮我解决这个问题？如果需要，我愿意提供更多信息

这是我的索引文件

{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sanskar Handicrafts</title>
    <link rel="stylesheet" href="{% static 'website/fontawesome-5.5/css/all.min.css' %}" />
    <link rel="stylesheet" href="{% static 'website/slick/slick.css' %}">
    <link rel="stylesheet" href="{% static 'website/slick/slick-theme.css' %}">
    <link rel="stylesheet" href="{% static 'website/magnific-popup/magnific-popup.css' %}">
    <link rel="stylesheet" href="{% static 'website/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" href="{% static 'website/css/style.css' %}" />

<style>
  
  * {
    margin: 0;
    padding: 0;
}

  #view > a{
    color: #FFF;
  }
  .flex-box{  
    display: flex;  
    flex-wrap:wrap;
    justify-content: space-around;
    padding-top: 40px;
  }
  .flex-img{
    max-width: 500px;
    max-height: 400px;
    padding: 20px;
}
.flex-text{
    padding: 20px;
    max-width: 500px;
}
.flex-rev{
    flex-direction: row-reverse;
}

</style>
  </head>
  <body>    
    <!-- Hero section -->
    <section id="infinite" class="text-white tm-font-big tm-parallax">
      <!-- Navigation -->            
      <nav class="navbar navbar-expand-md tm-navbar scroll" id="tmNav">
        <div class="tm-next">
          <a href="#infinite" class="navbar-brand" style="background: white;color: #369;width: 100%;padding-left: 10px;">
            Sanskar Handicrafts</a>
      </div> 
        <div class="container" style="display:grid; padding-left: 0; margin-left: 0;">   
  
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars navbar-toggler-icon"></i>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                  <a class="nav-link tm-nav-link" href="#infinite">Home</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link tm-nav-link" href="#whatwedo">About Us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link tm-nav-link" href="#gallery">Gallery</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link tm-nav-link" href="making" id="making">Making</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link tm-nav-link" href="#contact">Contact</a>
              </li>                    
            </ul>
          </div>        
        </div>
      </nav>

      <!-- <div class="tm-next tm-intro-next">
        <a href="#whatwedo" class="text-center tm-down-arrow-link">
          <i class="fas fa-2x fa-arrow-down tm-down-arrow"></i>
        </a>
      </div>       -->
    </section>
    <br>

    <section id="whatwedo" class="tm-section-pad-top" style="padding-top:50px; padding-bottom: 0px;">
      
      <div class="container">
            <div class="row tm-content-box"><!-- first row -->
                <div class="col-lg-12 col-xl-12">
                    <div class="tm-intro-text-container">
                        <h2 class="tm-text-primary mb-4 tm-section-title">About Us</h2>
                        <p class="mb-4 tm-intro-text">
                          Handicrafts of Nepal itself is needless of any introduction. In every corner of Kathmandu valley, you will find masterpieces of crafts and arts. The skill and techniques and excellent craftsmanship have been handed down from generation to generation, which represents the talent and skill of craftsmen and reflects the social, religious, and cultural values found in different parts of the country.</p>
                    </div>
                </div>
                <div class="col-lg-12 col-xl-12">
                  <div class="tm-intro-text-container">
                      <p class="mb-4 tm-intro-text">
                        Handicrafts of Nepal, itself is needless of any introduction. In each and every
corner of Kathmandu valley you will find the masterpieces of crafts and arts.
The skill and techniques, the excellent craftsmanship have been handed down
from generation to generation which represents the talent and skill of
craftsmen and also reflects the social, religious and cultural values found in
different parts of the country.

<b>Sanskar Handicrafts</b> is the place where you might find the statues with
excellence craftmanship. <b>Sanskar Handicrafts</b> is a gallery affiliated to <b>Siddhi
  Hastakala Udhyog</b>, a renowned name for fine arts and crafts.</p>
                  </div>
              </div>
            </div><!-- first row -->
            
            <div class="flex-box">
              <div><img src="{% static 'website/img/Gramps.JPG' %}" alt="" class="flex-img"></div>
              <div class="flex-text">
                  <h5>Our respected grandfather</h5>
                  <p>The legendary artisan, Late Mr. <b>SIDDHI RAJ SHAKYA</b>, needs no introduction. He is a big name, a brand, in the world of arts and crafts. His work and his contribution to art and culture is impeccable.</p>                            
              </div>
          </div>
          <div class="flex-box flex-rev">
              <div><img src="{% static 'website/img/Man1.jpg' %}" alt="" class="flex-img"></div>
              <div class="flex-text">
                  <h5>Senior Sculptor of our firm</h5>
                  <p>His son, our father, Senior Sculptor of our firm, Siddhi Hastakala Udhyog, Mr. <b>Siddhi Ratna Shakya</b>, well inherited the skill of sculpting, the talent.</p>                            
              </div>
          </div>                              
          <div class="flex-box">
            <div><img src="{% static 'website/img/Man0.JPG' %}" alt="" class="flex-img"></div>
            <div class="flex-text">
                <h5>Proprietor of Siddhi Hastakala Udhyog</h5>
                <p>The skill, techniques, and talent have been passed down from generation to generation. His grandson, Mr. <b>Sabin Shakya</b>, being the 4th generation to this elite group, proprietor of Siddhi Hastakala Udhyog, has been continuing the family's legacy. </p>                            
            </div>
        </div>                              

        </div>
      
    </section>
    
    <section id="testimonials" class="tm-section-pad-top tm-parallax-2" style="background-image: none; display: none;">      
      
    </section>
    
    <section id="gallery" class="tm-section-pad-top" style="padding-top: 30px">
      <div class="container tm-container-gallery">
        <div class="row">
          <div class="text-center col-12">
              <h2 class="tm-text-primary tm-section-title mb-4">Gallery</h2>
              <p class="mx-auto tm-section-desc">
                Praesent sed pharetra lorem, blandit convallis mi. Aenean ornare elit ac metus lacinia, sed iaculis nibh semper. Pellentesque est urna, lobortis eu arcu a, aliquet tristique urna.
              </p>
          </div>            
        </div>
        <div class="row">
            <div class="col-12">
                 <div class="mx-auto tm-gallery-container">
                    <div class="grid tm-gallery">
                        {% for image in images %}
                      <a href="{{image.img.url}}">
                        <figure class="effect-honey tm-gallery-item">
                          <img src="{{image.img.url}}" alt="{{image.name}}" class="img-fluid">
                        </figure>
                      </a>
                        {% endfor %}
                    </div>
                </div>
              </div>
          </div>

      <div id='view'>
       <a href="gallery"> View All</a>
      </div>
      </div>
    </section>

    <!-- Contact -->
    <section id="contact" class="tm-section-pad-top tm-parallax-2" style="padding-top:80px">
    
      <div class="container tm-container-contact">
        
        <div class="row">
            
            <div class="text-center col-12">
                <h2 class="tm-section-title mb-4">Contact Us</h2>
                <p class="mb-5">
                  Proin enim orci, tincidunt quis suscipit in, placerat nec est. Vestibulum posuere faucibus posuere. Quisque aliquam velit eget leo blandit egestas. Nulla id posuere felis, quis tristique nulla.
                </p><br>
            </div>
            
            <div class="col-sm-12 col-md-6">
              <form action="/submitted" method="POST">{% csrf_token %}
                <input id="name" name="name" type="text" placeholder="Your Name" class="tm-input" required />
                <input id="email" name="email" type="email" placeholder="Your Email" class="tm-input" required />
                <textarea id="message" name="message" rows="8" placeholder="Message" class="tm-input" required></textarea>
                <button type="submit" class="btn tm-btn-submit">Submit</button>
              </form>
            </div>
            
            <div class="col-sm-12 col-md-6">
                
                <div class="contact-item">
                  <a rel="nofollow" href="mailto:mail@company.com" class="item-link">
                      <i class="far fa-2x fa-envelope mr-4"></i>
                      <span class="mb-0">mail@company.com</span>
                  </a>              
                </div>
                
                <div class="contact-item">
                  <a rel="nofollow" href="https://www.google.com/maps" class="item-link">
                      <i class="fas fa-2x fa-map-marker-alt mr-4"></i>
                      <span class="mb-0">Our Location</span>
                  </a>              
                </div>
                
                <div class="contact-item">
                  <a rel="nofollow" href="tel:0100200340" class="item-link">
                      <i class="fas fa-2x fa-phone-square mr-4"></i>
                      <span class="mb-0">255-662-5566</span>
                  </a>              
                </div>
                
                <div class="contact-item">&nbsp;</div>
            
            </div>
            
            
        </div><!-- row ending -->
        
      </div>


        <footer class="text-center small tm-footer">
          <p class="mb-0">
          Copyright &copy; 2021 Company Name 
          
        </footer>

    </section>
    
    <script src="{% static 'website/js/jquery-1.9.1.min.js' %}"></script>
    <script src="{% static 'website/slick/slick.min.js' %}"></script>
    <script src="{% static 'website/magnific-popup/jquery.magnific-popup.min.js' %}"></script>
    <script src="{% static 'website/js/easing.min.js' %}"></script>
    <script src="{% static 'website/js/jquery.singlePageNav.min.js' %}"></script>
    <script src="{% static 'website/js/bootstrap.min.js' %}"></script>
    <script>
      
      function getOffSet(){
        var _offset = 450;
        var windowHeight = window.innerHeight;

        if(windowHeight > 500) {
          _offset = 400;
        } 
        if(windowHeight > 680) {
          _offset = 300
        }
        if(windowHeight > 830) {
          _offset = 210;
        }

        return _offset;
      }

      function setParallaxPosition($doc, multiplier, $object){
        var offset = getOffSet();
        var from_top = $doc.scrollTop(),
          bg_css = 'center ' +(multiplier * from_top - offset) + 'px';
        $object.css({"background-position" : bg_css });
      }

      // Parallax function
      // Adapted based on https://codepen.io/roborich/pen/wpAsm        
      var background_image_parallax = function($object, multiplier, forceSet){
        multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
        multiplier = 1 - multiplier;
        var $doc = $(document);
        // $object.css({"background-attatchment" : "fixed"});

        if(forceSet) {
          setParallaxPosition($doc, multiplier, $object);
        } else {
          $(window).scroll(function(){          
            setParallaxPosition($doc, multiplier, $object);
          });
        }
      };

      var background_image_parallax_2 = function($object, multiplier){
        multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
        multiplier = 1 - multiplier;
        var $doc = $(document);
        $object.css({"background-attachment" : "fixed"});
        
        $(window).scroll(function(){
          if($(window).width() > 768) {
            var firstTop = $object.offset().top,
                pos = $(window).scrollTop(),
                yPos = Math.round((multiplier * (firstTop - pos)) - 186);              

            var bg_css = 'center ' + yPos + 'px';

            $object.css({"background-position" : bg_css });
          } else {
            $object.css({"background-position" : "center" });
          }
        });
      };
      
      $(function(){
        // Hero Section - Background Parallax
        background_image_parallax($(".tm-parallax"), 0.30, false);
        background_image_parallax_2($("#contact"), 0.80);   
        background_image_parallax_2($("#testimonials"), 0.80);   
        
        // Handle window resize
        window.addEventListener('resize', function(){
          background_image_parallax($(".tm-parallax"), 0.30, true);
        }, true);

        // Detect window scroll and update navbar
        $(window).scroll(function(e){          
          if($(document).scrollTop() > 120) {
            $('.tm-navbar').addClass("scroll");
          }
        });
        
        // Close mobile menu after click 
        $('#tmNav a').on('click', function(){
          $('.navbar-collapse').removeClass('show'); 
        })

        // Scroll to corresponding section with animation
        $('#tmNav').singlePageNav({
          'easing': 'easeInOutExpo',
          'speed': 600
        });        
        
        // Add smooth scrolling to all links
        // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
        $("a").on('click', function(event) {
          if (this.hash !== "") {
            event.preventDefault();
            var hash = this.hash;

            $('html, body').animate({
              scrollTop: $(hash).offset().top
            }, 600, 'easeInOutExpo', function(){
              window.location.hash = hash;
            });
          } // End if
        });

        // Pop up
        $('.tm-gallery').magnificPopup({
          delegate: 'a',
          type: 'image',
          gallery: { enabled: true }
        });

        $('.tm-testimonials-carousel').slick({
          dots: true,
          prevArrow: false,
          nextArrow: false,
          infinite: false,
          slidesToShow: 3,
          slidesToScroll: 1,
          responsive: [
            {
              breakpoint: 992,
              settings: {
                slidesToShow: 2
              }
            },
            {
              breakpoint: 768,
              settings: {
                slidesToShow: 2
              }
            }, 
            {
              breakpoint: 480,
              settings: {
                  slidesToShow: 1
              }                 
            }
          ]
        });

        // Gallery
        $('.tm-gallery').slick({
          dots: true,
          infinite: false,
          slidesToShow: 5,
          slidesToScroll: 2,
          responsive: [
          {
            breakpoint: 1199,
            settings: {
              slidesToShow: 4,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 991,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 767,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
        ]
        });
      });
    </script>
    <script>
      document.addEventListener('DOMContentLoaded',function(){
        $('ul.slick-dots').remove()
      })
      let url = 'http://139.59.20.1/'
      $('#making').click(function(){
        window.location.href = url + "making"
      })
      $('#view').click(function(){
        window.location.href = url + "gallery"
      })
    </script>
    <style>
      a.slick-slide{
        /* max-width: 220px; */
      }
      img.img-fluid{
        min-width: 220px;
        max-width: 200px;
        max-height: 300px;
      }
    </style>
  </body>
</html>

这是我的 style.css



@import url("https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900");

body {
    font-family: "Raleway", sans-serif;
    font-size: 1.2em;
  color: #707070;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
a {
  transition: all 0.3s ease;
  color: #38B;
}

a:hover,
a:focus {
  text-decoration: none;
  color: #D40;
}

a:focus {
  outline: none;
}

.btn {
  padding: 8px 32px;
}

.btn:hover {
  background-color: #ced4da;
}

blockquote {
  font-size: 0.86em;
  line-height: 1.8em;
}

.tm-section-pad-top {
  padding-top: 80px;
  padding-bottom: 40px;
}

.tm-content-box {
  padding-top: 20px;
  padding-bottom: 40px;
}

.tm-text-primary {
  color: #37A;
}

.tm-font-big {
  font-size: 1.25rem;
}

.tm-btn-primary {
  color: white;
  background-color: #369;
  padding: 14px 30px;
}

.tm-btn-primary:hover,
.tm-btn-primary:focus {
  color: white;
  background-color: #38B;
}

/* Navbar */

.tm-navbar {
  position: fixed;
  width: 100%;
  z-index: 1000;
  background-color: transparent;
  transition: all 0.3s ease;
}

.tm-navbar.scroll {
  background-color: white;
  border-bottom: 1px solid #e9ecef;
}

.navbar-brand {
  color: white;
  font-size: 1.9rem;
  font-weight: bold;
}

.navbar-brand:hover,
.tm-navbar.scroll .navbar-brand:hover {
  color: #38B;
}

.tm-navbar.scroll .navbar-brand {
  color: #369;
}

.nav-item {
  list-style: none;
}

.tm-nav-link {
  color: white;
}

.tm-navbar.scroll .tm-nav-link {
  color: #369;
}

.tm-navbar.scroll .tm-nav-link:hover,
.tm-navbar.scroll .tm-nav-link.current,
.tm-nav-link:hover {
  color: #FFF;
  background-color: #369;
}

.navbar-toggler {
  border: 1px solid white;
  padding-left: 10px;
  padding-right: 10px;
}

.navbar-toggler-icon {
  color: white;
  padding-top: 6px;
}

.tm-navbar.scroll .navbar-toggler {
  border: 1px solid #707070;
}

.tm-navbar.scroll .navbar-toggler-icon {
  color: #707070;
}

/* Hero */

#infinite {
    background-color: #222;
  background-image: url(../img/infinite-loop-04.jpg);
  background-repeat: no-repeat;
  height: 100vh;
  min-height: 375px;
  position: relative;
}

@media (min-height: 600px) and (min-width: 1920px) {
  #infinite {
    background-size: cover;
  }
}

@media (min-height: 830px) {
  #infinite {
    background-position: center -210px;
  }
}

@media (min-height: 680px) and (max-height: 829px) {
  #infinite {
    background-position: center -300px;
  }
}

@media (min-height: 500px) and (max-height: 679px) {
  #infinite {
    background-position: center -400px;
  }
}

@media (max-height: 499px) {
  #infinite {
    background-position: center -450px;
  }
}

.tm-hero-text-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.tm-hero-text-container-inner {
  margin-top: -90px;
}

.tm-hero-title {
  font-size: 3.5rem;
  text-shadow: 2px 2px 2px #333;
}

.tm-hero-subtitle {
  text-shadow: 2px 2px 2px #333;
}

.tm-intro-next {
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
}

@media (max-height: 480px) {
  .tm-hero-text-container-inner {
    margin-top: -40px;
  }

  .tm-intro-next {
    bottom: 20px;
  }
}

.tm-down-arrow-link {
  display: block;
  margin-top: 18%;
}

.tm-down-arrow {
    color: #FFF;
    cursor: pointer;
    background: #357;
    padding: 15px 40px;
    transition: all 0.3s ease;
}

.tm-down-arrow:hover,
.tm-down-arrow:focus {
  color: #FFF;
  background: #37A;
  padding: 20px 50px;
}

/* Introduction */

#introduction {
  padding-bottom: 100px;
}

.tm-section-title {
  font-size: 2.6rem;
  font-weight: normal;
}

.tm-intro-text {
  font-size: 1.2rem;
}

.tm-icon {
  display: block;
  color: #37A;
}

.tm-continue {
    padding: 20px 0 30px 0;
}

/* Testimonials */
#testimonials {
  color: white;
  background-image: url(../img/infinite-loop-03.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

@media (max-width: 991px) {
  #testimonials {
    background-image: url(../img/infinite-loop-03-mobile.jpg);
  }
}

.tm-testimonials-content {
  position: relative;
  z-index: 100;
}

.tm-bg-overlay {
  width: 100%;
  height: 100%;
  background: rgba(20, 70, 80, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.tm-testimonials-carousel {
  max-width: 1050px;
  margin: 0 auto;
}

.tm-testimonial-item {
  max-width: 290px;
  margin-left: 35px;
  margin-right: 35px;
}

.tm-testimonial-item img {
  border-radius: 50%;
  margin-bottom: 35px;
}

.tm-testimonial-item figcaption {
  text-align: right;
  font-style: italic;
  font-size: 1.1rem;
}

/* Work */

.tm-section-desc {
  max-width: 650px;
  width: 100%;
  font-size: 0.9rem;
}

.tm-gallery-container {
  padding-top: 70px;
}

.tm-gallery-item {
}

.slick-dots {
  bottom: -65px;
}

.slick-dots li {
  margin: 0 13px;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before,
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #3ba0dd;
}

.tm-testimonials-carousel .slick-dots li button:before {
  color: white;
  opacity: 0.5;
}

.tm-testimonials-carousel .slick-dots li button:hover:before,
.tm-testimonials-carousel .slick-dots li button:focus:before,
.tm-testimonials-carousel .slick-dots li.slick-active button:before {
  color: white;
  opacity: 1;
}

.slick-dots li button:before {
  font-size: 18px;
}

/* Hover Effect */
/* Common style */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  background: #3085a3;
  text-align: center;
  cursor: pointer;
}

.grid figure img {
  position: relative;
  display: block;
  min-height: 300px;
  max-width: 200px;
  opacity: 0.8;
}

.grid figure figcaption {
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
  pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.grid figure h2 {
  word-spacing: -0.15em;
  font-size: 0.9em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 600;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

.grid figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/*---------------*/
/***** Honey *****/
/*---------------*/

figure.effect-honey {
  background: #4a3753;
  max-width: 220px;
}

figure.effect-honey img {
  opacity: 1;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}

figure.effect-honey:hover img {
  opacity: 0.4;
}

figure.effect-honey figcaption::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: #38C;
  content: "";
  -webkit-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
}

figure.effect-honey h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1em 1.5em;
  width: 100%;
  text-align: left;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey h2 i {
  font-style: normal;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, -30px, 0);
  transform: translate3d(0, -30px, 0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.tm-container-gallery {
    padding-top: 30px;
    }

/* Contact */

#contact {
  color: white;
  background-color: #001828;
  /* background-image: url(../img/infinite-loop-03.jpg); */
  background-position: center;
  background-repeat: no-repeat;
  min-height: 980px;
  position: relative;
  padding-bottom: 50px;
  padding-top: 100px;
}

.contact-item {
  margin-left: 20px;
  margin-bottom: 50px;
}

.item-link {
  display: flex;
  align-items: center;
}

.item-link i,
.item-link span {
  color: white;
  transition: all 0.3s ease;
}

.item-link:hover i,
.item-link:hover span {
  color: #3496d8;
}

.tm-input {
    margin: 0 0 20px 0;
    width: 90%;
  padding: 8px 20px;
  border-radius: 6px;
  border: 1px solid white;
  background: transparent;
  color: white;
}

.tm-btn-submit {
    font-size: 0.9em;
    color: #fff;
    background-color: #369;
    width: 50%;
    margin-bottom: 60px;
}

.tm-btn-submit:hover {
    color: #fff;
    background-color: #38B;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: white;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: white;
}

.tm-footer {
  position: absolute;
  bottom: 35px;
  left: 0;
  right: 0;
  padding: 0 15px;
}

.tm-footer a {
    color: #fff;
}

.tm-footer a:hover {
    color: #9CF;
}

.tm-footer-link {
  color: white;
}

.tm-footer-link:hover,
.tm-footer-link:focus {
  color: #38B;
  text-decoration: none;
}

p {
  line-height: 1.9;
}

@media (min-width: 768px) {
  .tm-intro-text-container {
    padding-left: 0px;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 30px;
    padding-left: 30px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1275px;
  }

  .tm-container-gallery {
    max-width: 1290px;
  }

  .tm-container-contact {
    max-width: 1063px;
  }
}

@media (max-width: 991px) {
  .tm-intro-text-container {
    padding-left: 15px;
    padding-top: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-intro-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-btn-submit {
    margin-left: 0;
    margin-top: 20px;
  }
}

@media (max-width: 767px) {

  .navbar-nav {
    max-width: 200px;
    text-align: right;
  }

  .navbar-collapse {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    border-radius: 3px;
  }

  .navbar-collapse .nav-link {
    color: #707070;
    padding-right: 20px;
  }
}

@media (max-width: 480px) {
  .tm-gallery-container {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }

  .tm-gallery-container-2 {
    max-width: 350px;
  }

  .slick-dots li {
    margin: 0 8px;
  }

  .tm-gallery-item {
    margin: 0;
  }
}

Answer 1

尝试从您的 flex-img class 中删除 max-width: 500px; 并添加 width: 100%;。请参考以下图片了解更多信息。

上图为错误，下图为解决方法

谢谢并致以最诚挚的问候！

为什么我的网站屏幕分辨率不适合移动设备的屏幕尺寸？

Why is the resolution of my website's screen not properly fitting the screen size on mobile?

html

javascript

css

resolution

screen-resolution