Html 调整大小时引导混乱

如何修改代码，以便调整大小时保持窗口内的所有内容完好无损？如图所示，调整大小时，文本位于节外。此外，图像会在导航栏中下拉

感谢您的帮助。多谢各位

滚动导航-启动引导模板
水














s
WATER2O
矿泉水
H20
改变知觉
已注册

CSS

。图标{
宽度：100px；
高度：100px；
}
I.iconz{
填充顶部：10px；
}
.icontext{
填充顶部：10px；
字体大小：粗体；
}
.筹款{
填充顶部：40px；
填充底部：40px；
}
.灰白色{
颜色：#EBE7E0；
}
.捐款额{
颜色：红色；
}
.icons2{
宽度：150px；
高度：150像素；
}
.middle2{
填充：10px；
边框：5px纯灰；
保证金：0；
}
.description_图标{
填充顶部：50px；
字体大小：20px；
字体大小：粗体；
文本对齐：居中；
填充底部：50px；
}
.导言部分{
背景色：黑色；
/*背景图片：url(https://i.ytimg.com/vi/9L6Aj0CJCuc/maxresdefault.jpg);*/
}
.正文{
颜色：白色；
顶部：450px；
}
.首先{
高度：300px；
宽度：450px；
}
.宽文本{
颜色：白色；
填充顶部：120px；
左侧填充：100px；
字体大小：75px；
}
.BroadText2{
颜色：白色；
左侧填充：210px；
字体大小：30px；
}
.footer 1{
垫底：20px；
填充顶部：10px；
背景色：#f9f9f9；
字体大小：粗体；
}
.箭头尺寸{
高度：100px；
宽度：100px；
颜色：白色；
}
.whitetext{
颜色：白色；
字体大小：粗体；
}
/*下拉按钮*/
.dropbtn{
背景色：#F8；
颜色：777777；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉内容a:悬停{背景色：#f1f1}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

您可以发布当前影响该区域的CSS吗

Bootstrap具有进度条功能，因此您不必使用静态映像。然后，您将能够相应地更改宽度，以获得所需的条的百分比

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70"
    aria-valuemin="0" aria-valuemax="100" style="width:70%">
        <span class="sr-only">70% Complete</span>
    </div>
</div>

70%完成

编辑：

---

或者，您可以在CSS中使用@media querys重新调整图像的宽度，具体取决于正在查看的屏幕大小。

您能为上述代码制作一个片段吗？？这样就可以很容易地确定您的问题。@ManiRaj添加了CSS

.icons{
    width: 100px;
    height: 100px;
}

.iconz{
    padding-top: 10px;
}

.icontext{
    padding-top: 10px;
    font-weight: bold;
}

.fundraise{
    padding-top: 40px;
    padding-bottom: 40px;
}

.offwhite{
    color: #EBE7E0;
}

.donation_amount{
    color: red;
}

.icons2{
    width: 150px;
    height: 150px;
}

.middle2{

    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

.description_icon{
    padding-top: 50px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 50px;
}

.intro-section{
    background-color: black;
    /*background-image: url(https://i.ytimg.com/vi/9L6Aj0CJCuc/maxresdefault.jpg);*/
}

.main_text{
    color: white;
    top: 450px;
}

.logofirst{
    height: 300px;
    width: 450px;
}

.breadtext{
    color: white;
    padding-top: 120px;
    padding-left: 100px;
    font-size:75px; 
}

.breadtext2{
    color: white;
    padding-left: 210px;
    font-size:30px; 
}

.footer1{
    padding-bottom: 20px;
    padding-top: 10px;
    background-color: #f9f9f9;
    font-weight: bold;
}

.arrowsize{
    height: 100px;
    width: 100px;
    color: white;
}

.whitetext{
    color: white;
    font-weight: bold;
}


/* Dropdown Button */
        .dropbtn {
            background-color: #F8F8F8;
            color: 777777;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* The container <div> - needed to position the dropdown content */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* Dropdown Content (Hidden by Default) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        /* Links inside the dropdown */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {background-color: #f1f1f1}

        /* Show the dropdown menu on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* Change the background color of the dropdown button when the dropdown content is shown */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70"
    aria-valuemin="0" aria-valuemax="100" style="width:70%">
        <span class="sr-only">70% Complete</span>
    </div>
</div>