我问你们，我尝试编写我的徽标，徽标格式应该是直的，但是我发现了一个问题，当窗口调整大小时徽标时间不直但会下降，所以它重叠。
这是我网站上的一张图片，我的徽标格式有什么问题？
https://i.stack.imgur.com/pTnle.jpg(徽标问题( https://i.stack.imgur.com/ypvu6.jpg(有问题的网站概述(
按照我的 HTML 代码，
<!DOCTYPE html>
<html lang="en">
<head>
<title>AN Photography | Photos</title>
<!-- add icon link -->
<link rel="icon" type="image/ico" href="images/Icons/unnamed.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300i,400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/lightgallery.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="site-wrap">
<div class="site-mobile-menu">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-3 border-bottom" role="banner">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-6 col-xl-2" data-aos="fade-down">
<h1 class="mb-0"><a href="index.html" class="text-black h2 mb-0">AN | Photos</a></h1>
</div>
<div class="col-10 col-md-8 d-none d-xl-block" data-aos="fade-down">
<nav class="site-navigation position-relative text-right text-lg-center" role="navigation">
<ul class="site-menu js-clone-nav mx-auto d-none d-lg-block">
<li><a href="index.html">Home</a></li>
<li><a>|</a></li>
<li><a href="Photos.html">Photos</a></li>
<li><a>|</a></li>
<li class="has-children">
<a href="#">More</a>
<ul class="dropdown">
<li><a href="#">My Journal</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Store</a></li>
<li><a href="../newsletter/newsletter.html">Newsletter</a></li>
</ul>
</li>
<li><a>|</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
</nav>
</div>
<div class="col-6 col-xl-2 text-right" data-aos="fade-down">
<div class="d-none d-xl-inline-block">
<ul class="site-menu js-clone-nav ml-auto list-unstyled d-flex text-right mb-0" data-class="social">
<li>
<a href="https://www.facebook.com/stevenWilliamG" class="pl-0 pr-3"><span class="icon-facebook"></span></a>
</li>
<li>
<a href="https://twitter.com/AdrikAleandra" class="pl-3 pr-3"><span class="icon-twitter"></span></a>
</li>
<li>
<a href="https://www.instagram.com/audynaufal7/" class="pl-3 pr-3"><span class="icon-instagram"></span></a>
</li>
<li>
<a href="https://www.linkedin.com/in/audy-naufal-ghiffari-ceh-875072141/" class="pl-3 pr-3"><span class="icon-linkedin"></span></a>
</li>
</ul>
</div>
<div class="d-inline-block d-xl-none ml-md-0 mr-auto py-3" style="position: relative; top: 3px;"><a href="#" class="site-menu-toggle js-menu-toggle text-black"><span class="icon-menu h3"></span></a></div>
</div>
</div>
</div>
</header>
<div class="site-section" data-aos="fade">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-7">
<div class="row mb-5">
<div class="col-12 ">
<h2 class="site-section-heading text-center">Photo Gallery</h2>
</div>
</div>
</div>
</div>
<div class="row" id="lightgallery">
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_1.jpg" data-sub-html="<h4>Sunrise Point Cukul</h4><p>Popular vista point offering scenic views of the sun rising over green hills with tea plantations.</p>">
<a href="#"><img src="images/nature_small_1.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_2.jpg" data-sub-html="<h4>Kampung Cai Ranca Upas</h4><p>Rustic mountainside tent campground with a hot-spring pool, outdoor activities & deer.</p>">
<a href="#"><img src="images/nature_small_2.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_3.jpg" data-sub-html="<h4>Bandung</h4><p>Bandung is not just a geographical problem, for me, it also involves feelings.</p>">
<a href="#"><img src="images/nature_small_3.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_4.jpg" data-sub-html="<h4>Lembang</h4><p>A Mountainous Getaway from the Hectic Urban Life.</p>">
<a href="#"><img src="images/nature_small_4.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_5.jpg" data-sub-html="<h4>Situ Cukul</h4><p>One of the hidden gems that must be visited by travelers in Bandung!</p>">
<a href="#"><img src="images/nature_small_5.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_6.jpg" data-sub-html="<h4>Kampung Cai Ranca Upas</h4><p>Good place to have fun with family and friends. Camping place that have lots of surprising unexpected Views.</p>">
<a href="#"><img src="images/nature_small_6.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_7.jpg" data-sub-html="<h4>Singkur Village</h4><p>A tourist destination in the Pangalengan area that offers exotic nature tourism with the nuances of the village, Kampung Singkur.</p>">
<a href="#"><img src="images/nature_small_7.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_8.jpg" data-sub-html="<h4>Situ Gunung</h4><p>Best place for photo hunting in Sukabumi.</p>">
<a href="#"><img src="images/nature_small_8.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_9.jpg" data-sub-html="<h4>Putri Mountain</h4><p>Excellent suited place for artists and connoisseurs of the authenticity of nature.</p>">
<a href="#"><img src="images/nature_small_9.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_10.jpg" data-sub-html="<h4>Bumi Pasundan</h4><p>MAW Brouwer: “ Bumi Pasundan Lahir Ketika Tuhan Sedang Tersenyum”</p>">
<a href="#"><img src="images/nature_small_10.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_11.jpg" data-sub-html="<h4>Parangtritis Beach</h4><p>Parangtritis, a Mystical and Enchanting Beach in Yogyakarta.</p>">
<a href="#"><img src="images/nature_small_11.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_12.jpg" data-sub-html="<h4>Imogiri Pine Forest</h4><p>Of shady pine trees and a magical scenery — Imogiri Pine Forest located in south Yogyakarta offers every visitor a fairytale moment of their own.</p>">
<a href="#"><img src="images/nature_small_12.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_13.jpg" data-sub-html="<h4>Imogiri Pine Forest</h4><p>one of nice destination while travelling in Yogyakarta.</p>">
<a href="#"><img src="images/nature_small_13.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_14.jpg" data-sub-html="<h4>Nglinggo Tea Plantation</h4><p>Wonderful break outside the city.</p>">
<a href="#"><img src="images/nature_small_14.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_15.jpg" data-sub-html="<h4>Waduk Sermo</h4><p>Large artificial lake drawing visitors with sunset views & boat rides, plus fishing & cycling.</p>">
<a href="#"><img src="images/nature_small_15.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_16.jpg" data-sub-html="<h4>Slili Beach</h4><p>Slili Beach, Mount Kidul Jogja: Tiny Beach Between Two Hills</p>">
<a href="#"><img src="images/nature_small_16.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_17.jpg" data-sub-html="<h4>Embung Tambakboyo</h4><p>Sunset viewing & photography are popular at this sizable dam with a jogging track.</p>">
<a href="#"><img src="images/nature_small_17.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_18.jpg" data-sub-html="<h4>Embung Nglanggeran</h4><p>Picturesque lake on a volcanic mountain used to collect rainwater for nearby fruit orchards.</p>">
<a href="#"><img src="images/nature_small_18.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_19.jpg" data-sub-html="<h4>Parangtritis Beach</h4><p>According to legend, the Javanese will advise you and even themselves not wear green, especially yellow-green around the beach as it’s believed that this attracts the Queen.</p>">
<a href="#"><img src="images/nature_small_19.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_20.jpg" data-sub-html="<h4>Timang Beach</h4><p>Worth every penny, effort and fear!</p>">
<a href="#"><img src="images/nature_small_20.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_21.jpg" data-sub-html="<h4>Mount Gede Pangrango National Park</h4><p>Diverse Nature in Gunung Gede Pangrango National Park, Indonesia.</p>">
<a href="#"><img src="images/nature_small_21.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_22.jpg" data-sub-html="<h4>Bogor</h4><p>“Adopt the pace of nature. Her secret is patience.”</p>">
<a href="#"><img src="images/nature_small_22.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_23.jpg" data-sub-html="<h4>Cipanas</h4><p>Away from Cibodas, and further down the road is the town of Cipanas. Here is the Cipanas Palace, the President’s mountain residence set amidst manicured lawns and refreshing hot springs.</p>">
<a href="#"><img src="images/nature_small_23.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_24.jpg" data-sub-html="<h4>Bogor Botanical Gardens</h4><p>Bogor Botanical Garden, Stroll at Leisure to Admire the Variety of Old, Gnarled Trees.</p>">
<a href="#"><img src="images/nature_small_24.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_25.jpg" data-sub-html="<h4>Shinjuku Gyoen</h4><p>Spacious city park in Shinjuku.</p>">
<a href="#"><img src="images/nature_small_25.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_26.jpg" data-sub-html="<h4>Osaka Castle (Osakajo)</h4><p>Reconstruction of the large castle.</p>">
<a href="#"><img src="images/nature_small_26.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_27.jpg" data-sub-html="<h4>Kyoto</h4><p>“The peace within and flowing from sacred spaces and architecture places is clothed in forgiveness, renunciation, and reconciliation.”</p>">
<a href="#"><img src="images/nature_small_27.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_28.jpg" data-sub-html="<h4>Byodoin Temple</h4><p>Temple with a beautiful Pure Land Garden.</p>">
<a href="#"><img src="images/nature_small_28.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_29.jpg" data-sub-html="<h4>Arashiyama Bamboo Grove</h4><p>The Arashiyama Bamboo Grove is one of Kyoto’s top sights and for good reason: standing amid these soaring stalks of bamboo is like being in another world.</p>">
<a href="#"><img src="images/nature_small_29.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_30.jpg" data-sub-html="<h4>Sanzenin Temple</h4><p>Popular Temple in rural Ohara north of Kyoto.</p>">
<a href="#"><img src="images/nature_small_30.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_31.jpg" data-sub-html="<h4>Koshoji Temple</h4><p>Zen temple on the other side of the river.</p>">
<a href="#"><img src="images/nature_small_31.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_32.jpg" data-sub-html="<h4>Kinkakuji (Golden Pavilion)</h4><p>Temple building covered in gold.</p>">
<a href="#"><img src="images/nature_small_32.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_33.jpg" data-sub-html="<h4>Hakone Shrine</h4><p>Hakone’s most famous Shinto shrine.</p>">
<a href="#"><img src="images/nature_small_33.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_34.jpg" data-sub-html="<h4>Arashiyama Bamboo Grove</h4><p>“Look deep into nature, and then you will understand everything better.”</p>">
<a href="#"><img src="images/nature_small_34.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_35.jpg" data-sub-html="<h4>Jamia Mosque</h4><p>The Jamia Mosque, an Unexpected Oasis in Central Hong Kong.</p>">
<a href="#"><img src="images/nature_small_35.jpg" alt="IMage" class="img-fluid"></a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 item" data-aos="fade" data-src="images/big-images/nature_big_36.jpg" data-sub-html="<h4>Hong Kong</h4><p>“Never let your memories be greater than your dreams.”</p>">
<a href="#"><img src="images/nature_small_36.jpg" alt="IMage" class="img-fluid"></a>
</div>
</div>
</div>
</div>
<div class="footer py-4">
<div class="container-fluid text-center">
<p>
© 2020 Audy Naufal <a>|</a>   <a href="about.html" style="color:rgb(169,169,169);">About</a>   <a href="contact.html" style="color:rgb(169,169,169);">Contact</a>   <a href="#" style="color:rgb(169,169,169);">Feedback</a>   <a href="../newsletter/newsletter.html" style="color:rgb(169,169,169);">Newsletter</a>
</p>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/picturefill.min.js"></script>
<script src="js/lightgallery-all.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/main.js"></script>
<script>
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
</script>
</body>
</html>附言：
请不要阻止我，因为我是这个平台的新手，我需要问一个问题
这是因为徽标列的宽度不再适合较小的屏幕尺寸。这就是为什么您的徽标换行到下一行的原因。增加列应该可以解决此问题。
<!-- change col-6 to col-9 -->
<div class="col-9 col-xl-2" data-aos="fade-down">
<h1 class="mb-0"><a href="index.html" class="text-black h2 mb-0">AN | Photos</a></h1>
</div>
<div class="col-10 col-md-8 d-none d-xl-block" data-aos="fade-down">
... <!-- no change for this -->
</div>
<div class="col-3 col-xl-2 text-right" data-aos="fade-down">
... <!-- change col-6 to col-3 -->
</div>