Html 开发人员控制台中不同设备大小的navbar后台出现问题_Html_Css_Navbar

Html 开发人员控制台中不同设备大小的navbar后台出现问题

html css

Html 开发人员控制台中不同设备大小的navbar后台出现问题,html,css,navbar,Html,Css,Navbar,嗨，我是网页设计新手，创建了我的第一个网站。但是我的标题导航栏有一个问题，在桌面上可以正常工作，但是当我在控制台中缩小时，导航栏的背景就不再延伸到整个宽度了。现在我还没有对手机和平板电脑版本进行媒体查询，我的问题是，我的代码是否有缺陷，因此为什么navbar背景不会拉伸，或者我是否能够使用新的媒体查询规则来修复这一问题我的html <!DOCTYPE html> <html lang="en"> <head>

嗨，我是网页设计新手，创建了我的第一个网站。但是我的标题导航栏有一个问题，在桌面上可以正常工作，但是当我在控制台中缩小时，导航栏的背景就不再延伸到整个宽度了。现在我还没有对手机和平板电脑版本进行媒体查询，我的问题是，我的代码是否有缺陷，因此为什么navbar背景不会拉伸，或者我是否能够使用新的媒体查询规则来修复这一问题

我的html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <div class="nav-wrap">
               <nav class="navbar">
                   <div class="nav-logo">
                       <div id="logo">
                           <a href="index.html"></a>
                       </div>
                       <div id="site-name">
                           <h1>Trans-Atheist</h1>
                           <p>Ignorance Is Never Bliss</p>
                       </div>
    
                   </div>
                   <div class="nav-buttons">
                       <div class="button">
                          <a href="index.html" class="menu-item">Home</a>
                       </div>
                       <div class="button"> 
                          <a href="about.html" class="menu-item">About</a>
                       </div>
                       <div class="button">
                          <a href="videos.html" class="menu-item">Videos</a>
                       </div>   
     
    
                   </div>
    
               </nav>
            </div>
        </div>
      


        <div class="container">
            <div class="content">
                <div class="colunm1">
                    <div class="links">
                       <h1>Links</h1>
                       <a href="https://www.patreon.com/trans_atheist?fan_landing=true">
                        <img src="images/patreon.png" alt="this is a patreon image" width="260px" height="200px">
                       </a>

                       <a href="">
                           <img src="images/discord.png" alt="This is a discord link" width="260px" height="200px">
                       </a>

                       <a href="">
                           <img src="images/youtube.jpg" alt="This is a link to Youtube Channel" width="260px" height="200px">
                       </a>
                    </div>
                </div>
                <div class="colunm2">
                    <div class="section">
                        <h1 class="centre">About me and what i do</h1>
                         <p class="centre">I am a Ex-jw content creator and activist. 
                            I make youtube videos, including rebuttals and debunking 
                            of teachings. My aim is to help as many people  as possible 
                            to leave and wake up from religious indoctrination.
                         </p>
                         <p class="centre">Hello, i am creating videos and podcasts, enlightening people to the destructive power of cults, i see myself and others like me as educators. I do not believe in money and power, but i do need to support myself while i do this work
                            Jehovahs Witnesses Have some very destructive teachings. I want to explore and pull apart at those teachings.</p>
                        
                         <p class="centre">It would mean the world to me if you were to support me on patreon, Please find the link to my patreon on the side bar to the left on desktop and the dropdown menu above for mobile. Please also see the links to my other content like discord server and youtube.</p>   


                         <div class="video">
                            <div id="last-vid" class="vid-indiv">
                                <h3>Ex-jw My sexual abuse, waking up, and disfellowshipping by Trans-Atheist</h3>
                                <iframe width="560" height="315" src="https://www.youtube.com/embed/9-EbGF-Obhg" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                         </div>
                    </div>
                </div>
                <div class="colunm3">
                     <div class="ad-sec">
                         <h1>Ad Section</h1>
                     </div>
                </div>
            </div>
        </div>



        <div class="container">
            <div class="footer">
                <a href="index.html">Home</a>
                <p>Trans-Atheist</p>
                <p>Remember Ignorance Is Never Bliss</p>
                <p>Email: katysykes420@gmail.com</p>
            </div>
        </div>        
        
    </body>
    </html>

问题不在于导航栏，而在于视频。由于它在html中有固定的宽度，当屏幕缩小时，整个

.content

溢出

将来，试着一次注释代码的不同部分，找出问题所在。我还喜欢在元素上使用临时彩色边框，以清楚地看到它们的行为。

谢谢，我会尝试一下，看看我是否能解决这个问题，我从没想过这会是个问题。是的，我将开始使用评论，我知道现在有点混乱，通过将宽度更改为一个百分比，这似乎是可行的。在低于500px的屏幕大小下仍然存在问题，但我认为这主要是因为我需要停止在小型设备上使用网格，而是让div堆叠。非常感谢你，这很有帮助

*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

body{
    background-color: rgb(61, 59, 59);
    width: 100%;
}

.container-header{
    background-color: rgba(84, 14, 150, 0.568);
    background-size: 100%;
    width: 100%;    

}


.nav-wrap{
    background-color: rgba(84, 14, 150, 0.568);
    background-size: 100%;
    width: 100%; 
}

.navbar{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40px;

}

.nav-logo{
    display: flex;
    flex-wrap: wrap;
}

#logo{
    background-image: url('/images/default.png');
    background-repeat: no-repeat;
    width: 150px; 
    height: 150px; 
    object-fit: contain;
    padding: 10px;
    margin: 10px;
}

.site-name h1{
    padding: 10px;
    margin: 10px;
}
.nav-buttons{
    display: flex;
    flex-wrap: wrap;
}

.button{
    padding: 10px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
    text-transform: uppercase;
    height: 42px;
}

.button a{
    color: gold;
    text-decoration: none;
    transition: color 0.5s;
}

.button:hover{
    border-bottom: 1px solid gold;
}

.button a:hover{
    color: rgb(230, 215, 132);
}

h1, p, h3{
    color: gold;
}



.content{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.colunm1, .colunm2, .colunm3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.colunm1{
    border-right: 1px solid indigo ;
}

.colunm3{
    border-left: 1px solid indigo;
}

.centre{
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.links > a > img{
    margin-bottom: 30px;
}

.vid-indiv{
    padding-top: 40px;
}

#last-vid{
    padding-bottom: 90px;
}

.footer{
    background-color: rgba(84, 14, 150, 0.568);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}