Html 体内容在x轴上溢出_Html_Css_Browser

Html 体内容在x轴上溢出

html css browser

Html 体内容在x轴上溢出,html,css,browser,Html,Css,Browser,我正在重新创建网站来练习我的html和css技能。我首先使用移动设备，当我在Iphone 6/7/8（375x667）上设置设备宽度/高度时（当然，其他宽度也可能如此），主体内容会溢出到视口边框的右侧我知道这可能是太多的代码，但我真的陷入了这个问题，我真的不知道是什么导致了这个问题我正在Opera开发者工具中预览它提前谢谢 CSS: HTML: nLight-用户体验和用户界面设计工作室独立的界面设计工作室。我们位于欧洲阳光明媚的诺维萨德，与世界各地的人们合作看工作 ↓

我正在重新创建网站来练习我的html和css技能。我首先使用移动设备，当我在Iphone 6/7/8（375x667）上设置设备宽度/高度时（当然，其他宽度也可能如此），主体内容会溢出到视口边框的右侧

我知道这可能是太多的代码，但我真的陷入了这个问题，我真的不知道是什么导致了这个问题

我正在Opera开发者工具中预览它

提前谢谢

CSS:

HTML:


nLight-用户体验和用户界面设计工作室





独立的界面设计工作室。
我们位于欧洲阳光明媚的诺维萨德，与世界各地的人们合作
看工作
↓  
复杂问题的简单解决方案。
用户体验/界面设计和前端开发。
一人工作室。10年以上的工作经验。

设计
我们做界面设计，我们是认真的。
Web应用程序、SAAS、营销网站。从发现、原型和设计，到迭代，再到最终产品
发展
前端开发
创建可扩展的前端策略。包括新开发人员的生活方式指南、文档和方法
关于我们
©2019年版权所有。欧洲手工制作

不确定这是否是您正在寻找的修复方案，但将

最小宽度：100%

替换为

最大宽度：100%

的

skrol

似乎可以做到这一点

.skrol {
    position: relative;
    left: 0;
    background-color: #595959;
    padding: 20px;
    margin: 0;
    max-width: 100%; /*instead of min-width*/
}

是的，它做到了。非常感谢你。

<!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>nLight - User Experiance & User Interface Design Studio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header> 
        <div class="logo">
            <img src="logomob.png" alt="nLight logo" class="logomob hidedesk"> 
            <img src="logodesk.png" alt="nLight logo" class="logodesk hidemob">
        </div>
        <nav>
            <ul class="menu">
                <li><a href="">Work</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section class="hero">
        <h1>Independent Interface design studio.</h1>
        <h3>We are located in sunny Novi Sad, Europe, and work with people worldwide</h3>
        <div class="button seework">See Work</div>
        <div class="bckgrnd"> <div class="strelica"> ↓ </div> </div>
    </section>
    <section class="skrol">
        <div class="skrolhed">
            <h2> Simple solutions to complex problems. </h2>
            <p> User Experience / Interface Design & Front-end Development.
                One man studio. 10+ years of experience. 
            </p>
        </div>
        <div class="skrolbox1">
            <em>DESIGN</em>
            <h3>We do Interface design and we are serious about it.</h3>
            <p>Web applications, SAAS, marketing web sites. From discovery, prototyping, and design, through iterations to final product.</p>
        </div>
        <div class="skrolbox2">
            <em>DEVELOPMENT</em>
            <h3>Front-end Development</h3>
            <p>Creating front end strategy that scales. Including living style guide, documentation and methodology to on-board new developers.</p>
        </div>
        <div class="button about">About Us</div>
    </section>
    <footer>
        <img src="logofut.png" alt="nLight logo" class="logofut">
        <p>© 2019 nLight. Hand Made in Europe.</p>
    </footer>
</body>
</html>

.skrol {
    position: relative;
    left: 0;
    background-color: #595959;
    padding: 20px;
    margin: 0;
    max-width: 100%; /*instead of min-width*/
}