页面溢出右边距

问题描述 投票：-2回答：1

这是我的css代码。

nav.navbar {
  color: white !important;
  background-color: #d82c2e;
  font-weight: bold;
}

html {
  margin-right: 70px !important;
}

.introSec {
  height: 750px;
}

.hr {
  width: 100px;
  border-top: 1px solid red;
}

.navbar-flat li a:focus,
.navbar-flat li a:hover,
.navbar-flat li.active a,
.navbar-brand {
  background-color: #c12728;
  color: #fff;
}

.navbar-flat a {
  transition: all .3s ease-in, 1s;
}

nav.navbar {
  padding-left: 35%;
}

.nav-link {
  color: #fff;
  /*font-size:calc(15px + 0.6vw);*/
}

.navbar-brand {
  color: white;
}

.introLine {
  text-align: center;
  padding-top: 30px;
  font-size: calc(15px + 0.6vw);
}

.pieImage {
  border-radius: 100%;
  margin: 40px 45%;
  height: calc(20% + 0.6vw);
  min-width: calc(13% + 0.6vw);
}

.pieImage2 {
  border-radius: 100%;
  margin-top: 20px;
  width: 300px !important;
  height: 600;
  display: inline-block;
}

.coolOne {
  margin-left: 17%;
}

#landing-header {
  margin-top: -80px;
}

.myName {
  text-align: center;
  color: white;
  font-family: Lato, sans-serif;
  letter-spacing: -2px;
}

.title {
  text-align: center;
  color: black;
  word-spacing: 3px;
  padding: 10px;
  margin: 15px auto;
  font-family: 'Pontano Sans', sans-serif;
  font-size: calc(30px + 0.6vw);
}

.firstSec {
  background-color: #d82c2e;
  height: 725px;
}

.aboutTitle {
  text-align: center;
  color: #d82c2e;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 30px;
}

.firstSec {
  margin-top: 57px;
}

.aboutIntro {
  text-align: center;
  font-family: Lato, sans-serif;
}

.aboutMe {
  padding: 20px 90px 0 90px;
}

.activities-inner {
  padding-top: 50px;
  margin: 50px;
  width: 100%;
}

.activities {
  border: 1px solid #e3e5e5;
  display: inline;
  padding: 50px;
}

.column {
  float: left;
  width: 25%;
  border: 1px solid lightgray;
  height: 200px;
  text-align: center;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  font-weight: 500;
  font-size: 30px;
  padding-top: 30px;
}

.icon {
  font-size: 40px;
  color: #d82c2e;
}

.technicalSkills {
  text-align: center;
  font-family: Lato, sans-serif;
}

.thirdSec {
  background-color: #d82c2e;
}

.technicalSkills {
  margin-top: 50px;
  color: white;
  padding-top: 20px;
}

.portfolioHeading {
  text-align: center;
  color: #d82c2e;
  font-weight: 700;
  font-family: 700;
  font-size: 30px;
}

.hr {
  margin-top: 20px;
  color: #d82c2e;
}

.portfolioPic {
  margin: 20px 35%;
  width: 30%;
}

.text-center {
  display: flex;
  flex-wrap: wrap;
}

.lastHr {
  float: left;
}

.contact {
  text-align: center;
}

.lastSec {
  background-color: #d82c2e;
  margin-top: 20px;
}

.contactDetails {
  padding-top: 20px;
}

.white {
  color: white;
}

.space {
  padding-top: 5px;
}

.row {
  padding-left: 100px;
  padding-right: 130px;
}

.dev {
  font-size: calc(18px + 1.0vw);
}

.secondDev {
  font-size: calc(15px + 0.6vw);
}

#landing-header {
  z-index: 1;
  position: relative;
  text-align: center;
  padding-top: 40vh;
}

#landing-header h1 {
  color: #fff;
}

.slideshow {
  position: inherit;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  list-style: none;
  margin: 0;
  margin-top: -23.1%;
  padding: 0;
}

.slideshow li {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  animation: imageAnimation 50s linear infinite;
}

.slideshow li:nth-child(1) {
  background-image: url(https://bearlake.org/wp-
 content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg)
}

.slideshow li:nth-child(2) {
  background-image: url(https://bearlake.org/wp-content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg);
  animation-delay: 10s;
}

.slideshow li:nth-child(3) {
  background-image: url(https://bearlake.org/wp-content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg);
  animation-delay: 20s;
}

.slideshow li:nth-child(4) {
  background-image: url(https://bearlake.org/wp-content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg);
  animation-delay: 30s;
}

.slideshow li:nth-child(5) {
  background-image: url(https://bearlake.org/wp-content/uploads/cache/images/garden-city-logan-campgrounds/garden-city-logan-campgrounds-987998613.jpg);
  animation-delay: 40s;
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  10% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  20% {
    opacity: 1
  }
  30% {
    opacity: 0
  }
}

.no-cssanimations .slideshow li {
  opacity: 1;
}

.nav-link {
  color: white !important;
}

.navbar-toggler {
  border-color: white;
  /*margin-left: -50%;*/
}

.navbar-fixed-top {
  top: 0;
}

.navbar-light .navbar-toggler {
  border-color: transparent !important;
}
<div class="row">
  <div class="column col-lg-3 col-md-6 col-sm-12">
    <p class="icon">
      <i class="fas fa-code">  </i> </p>
    <h3 class="dev"> DEVELOPMENT </h3>
  </div>
  <div class="column col-lg-3 col-md-6 col-sm-12">
    <p class="icon">
      <i class="fas fa-music"></i>
    </p>
    <h3 class="dev"> MUSIC </h3>
  </div>
  <div class="column col-lg-3 col-md-6 col-sm-12">
    <p class="icon">
      <i class="fas fa-basketball-ball"></i>
    </p>
    <h3 class="dev"> TENNIS </h3>
  </div>
  <div class="column col-lg-3 col-md-6 col-sm-12">
    <p class="icon">
      <i class="fas fa-book"></i>
    </p>
    <h3 class="dev"> BOOKS </h3>
  </div>
</div>
</div>
<div id="scrollToThird">

  </section>
  <!-- Third Sec Starts here -->
  <section class="thirdSec">

    <h2 class="technicalSkills"> TECHNICAL SKILLS </h2>

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol id="scrollToFourth" class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active coolOne">
          <img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./htmlPercent2.jpg">
          <img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./cssPercent2.jpg">
          <img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./javascriptPercent2.jpg">

        </div>
        <div class="carousel-item coolOne">
          <img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./nodejsPercent2.jpg">
          <img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./expressPercent2.jpg">
          <img class="pieImage2 col-lg-4 col-md-4 col-sm-12" src="./javascriptPercent2.jpg">


        </div>
      </div>

      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>

      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">

        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>

      </a>

    </div>

  </section>

</div>


<section class="fourthSec">

  <hr class="hr">

  <h2 class="portfolioHeading"> PORTFOLIO </h2>

  <div class="container">
    <div class="row text-center" style="display:flex; flex-wrap: wrap;">
      <div class="col-lg-4 col-md-6">
        <div class="img-thumbnail">
          <img src="./screencapture-lit-mesa-98519-herokuapp-1518954523255.png" class="img-fluid">
          <div class="caption">
            <h4 class="secondDev"> Yelp Camp</h4>
          </div>
          <a href="https://lit-mesa-98519.herokuapp.com" class="btn btn-primary"> Check it out! </a>
        </div>
      </div>

      <div class="col-lg-4 col-md-6">
        <div class="img-thumbnail">
          <img src="./screencapture-dry-castle-83141-herokuapp-blogs-1519047247719.png" class="img-fluid">
          <div class="caption">
            <h4 class="secondDev"> Blog Site</h4>
          </div>
          <a href="https://dry-castle-83141.herokuapp.com/" class="btn btn-primary"> Check it out! </a>
        </div>
      </div>

      <div class="col-lg-4 col-md-6">
        <div class="img-thumbnail">
          <img src="./screencapture-whispering-hamlet-69416-herokuapp-results-1519112901364.png" class="img-fluid">
          <div class="caption">
            <h4 class="secondDev"> Seach Any Movie</h4>
          </div>
          <a href="https://whispering-hamlet-69416.herokuapp.com/" class="btn btn-primary"> Check it out! </a>
        </div>
      </div>

      <div class="space col-lg-4 col-md-6">
        <div class="img-thumbnail">
          <img src="./IMG_3717.PNG" width="80" class="img-fluid">
          <div class="caption">
            <h4 class="secondDev"> 101 WeirdFunFacts </h4>
          </div>
          <a href="https://itunes.apple.com/ae/app/101-weirdfunfacts/id1241258275?mt=8" class="btn btn-primary"> Check it out! </a>
        </div>
      </div>

      <div class="space col-lg-4 col-md-6">
        <div class="img-thumbnail">
          <img src="./IMG_3718.PNG" width="80" class="img-fluid">
          <div class="caption">
            <h4 class="secondDev"> Flash Card</h4>
          </div>
          <a href="https://itunes.apple.com/ae/app/top-flash-card-app/id1264308825?mt=8" class="btn btn-primary"> Check it out! </a>
        </div>
      </div>

      <div class="space col-lg-4 col-md-6">
        <div class="img-thumbnail">
          <img src="./IMG_3719.PNG" width="80" class="img-fluid">
          <div class="caption">
            <h4 class="secondDev"> Algebraic Equations </h4>
          </div>

          <a href="https://itunes.apple.com/ae/app/mixed-algebraic-equations/id1258099902?mt=8" class="btn btn-primary"> Check it out! </a>
          <div id="scrollToFifth">
          </div>
        </div>
      </div>
    </div>
  </div>

</section>
<section class="lastSec">

  <h2 class="contactDetails"> CONTACT DETAILS </h2>


  <hr class="col-lg-4 col-md-4 col-sm-4 col-xs-2 lastHr">
  <br>
  <br>

  <div class="contact">
    <h5 class="white"> Email: </h5>
    <p> —————————————— </p>
    <h5 class="white"> Contact Number: </h5>
    <p> ——————————— </p>
    <h5 class="white"> Address: </h5>
    <p> ———————————— </p>
  </div>
</section>

<p> assasa </p>


<p> assasa </p>


<p> assasa </p>


<p> assasa </p>


<p> assasa </p>


<p> assasa </p>


<p> assasa </p>


<p> assasa </p>


<p> assasa </p>

<% include partials/footer %>

  <% include partials/header %>

    <section class="introSec">
      <!--<div id="landing-header">-->
      <div id="landing-header">

        <h1>Hi, I am Neymat Kakar</h1>
        <h4> Web/IOS Developer In Dubai </h4>
      </div>

      <ul class="slideshow">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>


    </section>

    <div id="scrollTo">
      <section class="firstSec">

        <nav class="navbar navbar-expand-lg navbar-flat navbar-light">
          <!--<a class="navbar-brand" href="#srcollTo">HOME </a>-->
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">

            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a class="nav-link" href="#scrollTo">HOME</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#scrollToSec">ABOUT</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#scrollToThird">SKILLS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#scrollToFourth">PORTFOLIO</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#scrollToFifth">CONTACT</a>
              </li>
            </ul>
          </div>
        </nav>

        <img class="pieImage" src="./IMG_8224.jpg">

        <h1 class="myName"> NEYMAT KAKAR </h1>
        <h3 class="introLine"> CREATIVE - PROFESSIONAL - PASSIONATE</h3>
        <h5 class="col-lg-12 col-md-12 col-sm-12 col-xs-12 title"> WEB/IOS APP DEVELOPER</h5>

        <div id="scrollToSec">

      </section>
      </div>

      <!-- Second Section Starts Below -->





      <section class="secSec">

        <hr class="hr">
        <h3 class="aboutTitle"> HERE'S WHAT I'M DOING </h3>
        <!--<p class = "aboutIntro"> I introduce the most creative and original ideas for my company </p>-->

        <p class="aboutMe"> “I am a simple person with great passion for web development. I have been in the field now for quite some time, and have been loving every minute of it. I am also a part-time blogger and avid reader of non-fiction and overall thinker. I also enjoy
          going out to local meetups, events and descent clubs to interact with people from various walks of life.” </p>

enter image description here

请仔细阅读图片。这就是我的页面的样子。

从导航栏部分注意，右边的边距是出路。我需要所有部分具有相同的边距，页面不会溢出。

html css overflow margin webpage
1个回答
0
投票

我认为你的html和body边缘的问题。删除margin-right到你的html标记。尝试设置下面的CSS

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding:0;
    overflow-x:hidden;
}

如果您正在使用bootstrap容器类的引导程序来获取左右空间，请在html中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.