Skip to main content
A
aprilv88506003
Participant
March 8, 2018
Answered

bottom nav and footer keep pasting over my events section

  • March 8, 2018
  • 1 reply
  • 468 views

Hello,

I started creating this website (this is my first one) and I am running into a couple of problems. the first being that after i create my events section my bottom navigation and footer keep pasting over my events sections. I tried z-index, having footer at bottom:0, and have changed the height of the body, nothing seems to work.

Also both of my navigation bars will not go all the way to the left and I want them to fill up the whole space. Lastly there are these >>>> that even after I continue to delete them and are not showing up in my html code, they continue showing in my live view. I have no idea how to get rid of them or why they continue to stay there.

Here is a link to the site to show it:

http://127.0.0.1:52524/preview/app/index.html 

HTML:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>index.html</title>

<link href="style3.css" rel="stylesheet" type="text/css">

            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/3b12c77184f12b8ea351bf00b/c8f4b053490f36b3871a0f7de.js");</script>

<!--Mailchimp-->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>

            <div class="container">

<header>

            <div class="primary_header">

            <img src="web header no background.png" width="1500" height="250" alt="">

  <img style="float: left" ></div>

</header>

            </div>

<div id="navMenu">

<ul>

<li><a href="#">Home</a></li>       

<li><a href="#">Who We Are</a>

            <ul>

            <li><a href="#">Our Story</a></li>

            <li><a href="#">Mission, Puspose, Core Values</a></li>

            <li><a href="#">Meet The Team</a></li>

                        <li><a href="#">Careers</a></li>

            <li><a href="#">Events</a></li>

            </ul>

            </li>

            <li><a href="#">Industries</a>

            <ul>

                        <li><a href="#">Automotive</a></li>

              <li><a href="#">Construction & Related Industries</a></li>

              <li><a href="#">Cosmetology</a></li>

             <li><a href="#">Environmental</a></li>

            <li><a href="#">Healthcare</a></li>

            <li><a href="#">Manufacturing & Distribution</a></li>

            <li><a href="#">Non-Profits</a></li>

            <li><a href="#">Real Estate</a></li>

            <li><a href="#">Restaurants</a></li>

            <li><a href="#">Retail</a></li>

            </ul>

            </li>

            <li><a href="#">Services</a>

            <ul>

                        <li><a href="#">Accounting</a>

                           <ul>

                                    <li><a href="#">Link 1</a></li>

                   <li><a href="#">Link 2</a></li>

                  <li><a href="#">Link 3</a></li>

                  <li><a href="#">Link4</a></li>

                        </ul>

                        </li>

            <li><a href="#">Advisory</a>

                        <ul>

                           <li><a href="#">Link 1</a></li>

                   <li><a href="#">Link 2</a></li>

                  <li><a href="#">Link 3</a></li>

                  <li><a href="#">Link4</a></li>

                        </ul>

             </li>

            <li><a href="#">Business Packages</a>

                        <ul>

                           <li><a href="#">Link 1</a></li>

                   <li><a href="#">Link 2</a></li>

                  <li><a href="#">Link 3</a></li>

                  <li><a href="#">Link4</a></li>

                        </ul>

            </li>

            <li><a href="#">Business Services</a>

                          <ul>

                           <li><a href="#">Link 1</a></li>

                   <li><a href="#">Link 2</a></li>

                  <li><a href="#">Link 3</a></li>

                  <li><a href="#">Link4</a></li>

                        </ul>

            </li>

            <li><a href="#">Individuals</a>

                          <ul>

                            <li><a href="#">Individual Planning</a></li>

                            <li><a href="#">Individual Tax</a></li>

                        </ul>

                        </li>

            <li><a href="#">Payroll</a>

                          <ul>

                            <li><a href="#">Link 1</a></li>

                   <li><a href="#">Link 2</a></li>

                  <li><a href="#">Link 3</a></li>

                  <li><a href="#">Link4</a></li>

                        </ul>

                        </li>

            <li><a href="#">Start Up Package</a></li>

            <li><a href="#">Start Up Services</a>

                           <ul>

                         <li><a href="#">Link 1</a></li>

                   <li><a href="#">Link 2</a></li>

                  <li><a href="#">Link 3</a></li>

                  <li><a href="#">Link4</a></li>

                        </ul>

            </li>

            <li><a href="#">Tax Services</a>

               <ul>

                        <li><a href="#">Audits & IRS Issues</a></li>

                        <li><a href="#">Business Tax</a></li>

                        <li><a href="#">Individual Tax</a></li>

                        <li><a href="#">State & Local Tax</a></ul></li>

            </ul>

            </li>

<li><a href="#">Resources</a>

            <ul>

            <li><a href="#">News</a></li>

            <li><a href="#">Blogs</a></li>

            <li><a href="#">Testimonials</a></li>

            <li><a href="#">FAQ</a></li>

            <li><a href="#">Tools</a>

                        <ul>

                            <li><a href="#">Link 1</a></li>

                   <li><a href="#">Link 2</a></li>

                  <li><a href="#">Link 3</a></li>

                  <li><a href="#">Link4</a></li>

                        </ul>

            </li>

            </ul>

            </li>    

            <li><a href="#">Contact Us</a></li>

           

</ul> <!--End of main ul-->

</div> <!---End of navMenu-->

           

<!---Search Bar-->

<div id="searchbox">

  <form>

            <input type="text" name="text" class="search" placeholder="Search Here">

            <input type="submit" class="submit" value="search">

  </form>

</div>

           

<!---Slideshow Conatiner-->

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->

  <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

    <li data-target="#myCarousel" data-slide-to="3"></li>

  </ol>

  <!-- Wrapper for slides -->

  <div class="carousel-inner" role="listbox">

    <div class="item active">

      <img src="images/image1.jpeg" width="1200" height="400" alt="">

      <div class="carousel-caption">

<h3>Caption 1</h3>

<p>Content Goes Here.</p>

      </div>

    </div>

    <div class="item">

      <img src="images/image2.jpeg"img_chania2.jpg"" width="1200" height="400"alt="">

      <div class="carousel-caption">

        <h3>Caption 2</h3>

<p>Content Goes Here.</p>

      </div>

    </div>

    <div class="item">

      <img src="images/image3.jpeg" width="1200"height="400" alt="">

      <div class="carousel-caption">

<h3>Caption 3</h3>

<p>Content Goes Here.</p>

      </div>

    </div>

    <div class="item">

      <img src="images/image4.jpeg" width="1200" height="400" alt="">

      <div class="carousel-caption">

<h3>Caption 4</h3>

<p>Content Goes Here.</p>

      </div>

    </div>

  </div>

  <!-- Left and right controls -->

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

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

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>

            <!--end of slider-->

           

           

            <div class="container4">

            <!--Thumbnail columns-->

<div class="wrapper">

            <div class="column1" >

              <h2>Get To Know Us</h2>

              <p>Click below to learn more about who we are and what  we stand for </p>

                        <button type="button" class="btn btn-default">Learn More</button>

            </div>

            <div class="column2" >

              <h2> Business Services</h2>

              <p>Click below to learn more about the services we provide to our small businesses and start up companies </p>

                        <button type="button" class="btn btn-default">Learn More</button>

            </div>

            <div class="column3">

              <h2>Specialized Industries</h2>

              <p>Click below to visit the various business industries our firm specializes in </p>

                        <button type="button" class="btn btn-default">Learn More</button>

            </div>

            <div class="column4">

              <h2>Schedule a Meeting</h2>

              <p>Contact us to book an appointment with a member our knowlegdeable and experienced team</p>

                        <button type="button" class="btn btn-default">Schedule</button>

                        </div>

            </div>

<!---end of wrapper--->

           

<!----main content--->

            <div class="row2">

            <div class="column5">

                         <p class="image_align"><img src="pexels-photo-262508.jpeg" width="300" height="300" style="background-color: white"></p>

                        <h4>Blog 1 Title</h4>

            </div>

            <div class="column5">

                         <p class="image_align"><img src="pexels-photo-262508.jpeg" width="300" height="300" style="background-color: white"></p>

                        <h4>Blog 2 Title</h4>

            </div>

            <div class="column5">

                         <p class="image_align"><img src="pexels-photo-262508.jpeg" width="300" height="300"style="background-color: white" ></p>

                        <h4>Blog 3 Title</h4>

            </div>

            <div class="column5">

                         <p class="image_align"><img src="pexels-photo-262508.jpeg" width="300" height="300" style="background-color: white"></p>

                        <h4>Blog 4 Title</h4>

            </div>

            </div>

            <div class="row3">

<div class="column6">

<p class="image_align2"><img src="pexels-photo-261949.jpeg" width="300" height="300" style="background-color: white"<a href=""></p>

  <h4>Article Title 1</h4>

   </div>

<div class="column6">

<p class="image_align2"><img src="pexels-photo-261949.jpeg" width="300" height="300" style="background-color: white"<a href=""></p>

  <h4>Article Title 2</h4>

   </div>

<div class="column6">

<p class="image_align2"><img src="pexels-photo-261949.jpeg" width="300" height="300" style="background-color: white"<a href=""></p>

  <h4>Article Title 3</h4>

   </div>

<div class="column6">

<p class="image_align2"><img src="pexels-photo-261949.jpeg" width="300" height="300" style="background-color: white"<a href=""></p>

  <h4>Article Title 4</h4>

   </div>

</div>

<!---end of main content-->

<!--Events-->

            <div class="conatiner3">

                        <h1>Up-Coming Events</h1>

                        <button type="button" class="btn btn-default">View More</button>

            <div class="row4">

            <div class="[ col-xs-12 col-sm-offset-2 col-sm-8 ]">

                        <ul class="event-list">

                        <li>

                                    <time datetime="2018-03-01">

                                    <span class="day">01</span>

                                    <span class="month">Mar</span><br>

            <span class="year">2018</span>

                                    <span class="time">6-9p.m.</span>

                        </time>

                        <img src="event-1597531_1920.jpg" width="200px height=320px">

                                    <div class="info">

                                    <h2 class="title">Event 1</h2>

                                    <p class="desc">In Room 203 Rhode Island College</p>

                                    </div>

                                    </li>

                                    <li>

                                    <time datetime="2018-05-05">

                                    <span class="day">05</span>

                                    <span class="month">May</span><br>

            <span class="year">2018</span>

                                    <span class="time">6-9p.m.</span>

                        </time>

                        <img src="event-1597531_1920.jpg" width="200px height=320px">

                                    <div class="info">

                                    <h2 class="title">Event 2</h2>

                                    <p class="desc">In Room 203 Rhode Island College</p>

                                    </div>

                                    </li>

                                    <li>

                                    <time datetime="2018-07-10">

                                    <span class="day">10</span>

                                    <span class="month">Jul</span><br>

            <span class="year">2018</span>

                                    <span class="time">6-9p.m.</span>

                        </time>

                        <img src="event-1597531_1920.jpg" width="200px height=320px">

                                    <div class="info">

                                    <h2 class="title">Event 3</h2>

                                    <p class="desc">In Room 203 Rhode Island College</p>

                                    </div>

                                    </li>

                        </ul>

                        </div>

                        </div>

<!---End of Events--->

           

            </div> <!---end of conatiner4-->

           

<!---bottom nav--->

<div id="nav2">

                        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Who We Are</a></li>

            <li><a href="#">Industries</a></li>

            <li><a href="#">Services</a></li>

            <li><a href="#">Resources</a></li>

            <li><a href="#">Contact Us</a></li>

            </ul>

</div>

</body>         

<footer>

<div id="footer">

            <div class="container2">

   <form id="subscribe" action="" method="post">

                        <h2>Subscribe to Our Free Newsletter </h2>

                        <p> Subscribe to our mailing list to recieve our FREE Newsletter on the latest tips and news to grow your business</p>

                        <fieldset>

               <input placeholder="First Name" type="text" tabindex="1" required autofocus>

               </fieldset>

               <fieldset>

                        <input placeholder="Last Name" type="text" tabindex="2" required>

               </fieldset>

               <fieldset>

               <input placeholder="Email Address" type="email" tabindex="3" required>

               </fieldset>

               <fieldset>

               <button name="subscribe now" type="subscribe now" id="subscribe-mail" data-submit="...Sending">Subscribe Now</button>

               </fieldset>

                        </form>

            </div>

           

     <div class="social">

                         <h2>Follow Us</h2>

            <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>

            <li><a href="#"><i class="fab fa-linkedin"></i></a></li>

             <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>

            <li><a href="#"><i class="fab fa-instagram"></i></a></li>

            </div>

            </div>

            </footer>

            </html>

CSS:

CSS: @charset "utf-8";

body {

            width: 1550px;

            height: 6000px;

}

#navMenu {

            padding: 0;

            margin: 0;

}

#navMenu body {

            background: #263b8b;

            padding:0;

            font-family: 'eb-garamond';

}

#navMenu ul {

            list-style: none;

            margin-left: 0;

}

#navMenu ul li {

            background: #263b8b;

            float: left;

            padding-right: 0;

            position: relative;

            z-index: 6000;

}

#navMenu ul a {

            display: inline-block;

            width: 247px;

            height: 60px;

            text-align: center;

            background: #263b8b;

            color: white;

            text-decoration: none;

            font-size:28px;

}

#navMenu ul a:hover {

            background: #c9c7c7;

}

#navMenu li>ul {

            display: none;

            position: absolute;

            left: -15px;

            top: 100%;

            margin-top: 1px;

}

#navMenu li:hover>ul {

            display: block;

}

#navMenu li>ul li {

            padding: 0;

            padding-top: 1px;

}

#navMenu li>ul li>ul {

            left: 100%;

            top: 5px;

            padding-left:1px;

}

#navMenu li>ul li>ul li {

            width: 200px;

}

#navMenu li:hover>a {

            background: #263b8b;

            color: #00a84e;

}

#searchbox {

            background-color:#263B8B;

            position: relative;

}

#searchbox form {

            width: 1200px;

            margin: auto;

            margin-top: 5px;

            position: relative;

}

.search {

            width: 80%;

            padding: 10px;

            font-size: 20px;

}

.submit {

            width: 15%;

            padding: 10px;

            font-size: 20px;

            background: #00a84e;

}263B8B

@media (max-width:900px) {

            #searchbox {

                        width: 50%;

            }

}

@media (max-width:600px) {

            #searchbox {

                        width: 100%;

            }

}

.carousel-inner > .item > img,

  .carousel-inner > .item > a > img {

      width: 50%;

      margin: auto;

              top-margin: 10px;

  }

.wrapper {

            display: flex;

            display: -webkit-flex;

            display: -ms

}

.column1 {

            float: left;

            width: 389px;

            height: 215px;

            padding: 5px 15px;

            text-align: center;

            color: white;

            max-height: 220px;

            max-width: 390px;

            background-color: #00A84E;

}

.column1 button {

            background:#2638b8;

            font-family: "eb-garamond";

            font-size: 17px;

            color: white;

}

.column1 button:hover {

            background: #c9c7c7;

}

.column2 {

            float: left;

            width: 389px;

            height: 215px;

            padding: 5px 15px;

            text-align: center;

            color: white;

            max-height: 220px;

            max-width: 390px;

            background-color: #00A84E;

}

.column2 button {

            background:#2638b8;

            font-family: "eb-garamond";

            font-size: 17px;

            color: white;

}

.column2 button:hover {

            background: #c9c7c7;

}

.column3 {

            float: left;

            width: 389px;

            height: 215px;

            padding: 5px 15px;

            text-align: center;

            color: white;

            max-height: 220px;

            max-width: 390px;

            background-color: #00A84E;

}

.column3 button {

            background:#2638b8;

            font-family: "eb-garamond";

            font-size: 17px;

            color: white;

}

.column3 button:hover {

            background: #c9c7c7;

}

.column4 {

            float: left;

            width: 389px;

            height: 215px;

            padding: 5px 15px;

            text-align: center;

            color: white;

            max-height: 220px;

            max-width: 390px;

            background-color: #00A84E;

}

.column4 button {

            background:#2638b8;

            font-family: "eb-garamond";

            font-size: 17px;

            color: white;

}

.column4 button:hover {

            background: #c9c7c7;

}

}@media (max-width 900px) {

            .column {

                        width: 50%;

            }

}

@media (max-width:600px) {

            .column1 {

                        width: 100%;

            }

}

.row2 {

            width: 100%;

            margin-top: 50px;

            margin-right: 0px;

            margin-bottom: 0px;

            margin-left: 0px;

            padding-top: 0px;

            padding-right: 0px;

            padding-bottom: 0px;

            padding-left: 0px;

            display: inline-block

}

.column5 {

    width: 25%;

            float: left;

            font-family:"eb-garamond";

            line-height: 24px;

            padding-top: 10px;

            padding-bottom: 10px;

            text-align: center;

            margin-top: 15px;

            margin-bottom: 15px;

            padding-left: 0px;

            padding-right: 0px;

            margin-left: 0px;

            margin-right: 0px;

}

.column5:hover {

            box-shadow: 5px 8px 16px 0 rgba(0,0,0,0.2);

}

.row3 {

            width: 100%;

            margin-top: 0px;

            margin-right: 0px;

            margin-bottom: 0px;

            margin-left: 0px;

            padding-top: 50px;

            padding-right: 0px;

            padding-bottom: 0px;

            padding-left: 0px;

            display: inline-block

}

.column6 {

            width: 25%;

            float: left;

            font-family:"eb-garamond";

            line-height: 24px;

            padding-top: 10px;

            padding-bottom: 10px;

            text-align:center;

            margin-top: 15px;

            margin-bottom: 15px;

            padding-left: 0px;

            padding-right: 0px;

            margin-left: 0px;

            margin-right: 0px;

}

.column6:hover {

box-shadow: 5px 8px 16px 0 rgba(0,0,0,0.2);

}

.container3 {

            font-family: "eb-garamond";

            z-index: 6000px;

             height: 200px;

}

.event-list {

            list-style: none;

            font-family: "eb-garamond";

            margin: 0;

            padding: 0;

            margin-top: 20px;

}

.event-list>li {

            background-color: white;

            box-shadow:  5px 5px 5px 5px #263b8b;

            box-shadow: 5px 5px 5px 5px #263b8b;

            padding: 0;

            margin: 0 0 20px;

}

.event-list>li>time {

            display: inline-block;

            width: 100%;

            background-color: #263b8b;

            color: white;

            padding: 5px;

            text-align: center;

            text-transform: uppercase;

}

.event-list>li>time>span {

            display: none;

}

.event-list>li>time>.day {

            display: block;

            font-size: 36pt;

            font-weight: 100;

            line-height: 1;

}

.event-list>li>time>.month {

            display: block;

            font-size: 24pt;

            font-weight: 900;

            line-height: 1;

}

.event-list>li>img {

            width: 30%;

}

.event-list>li>.info {

            padding-top: 5px;

            text-align: center;

}

.event-list>li>.info>.title {

            font-size: 36pt;

            font-weight: 300;

            margin: 0;

}

.event-list>li>.info>.desc {

            font-size: 18pt;

            font-weight: 300;

            margin: 0;

}

.conatiner3 button {

            background-color: #00a84f;

            color: white;

            font-size: 18px;

            position: relative;

            margin-left: 1160px;

}

.container3 button:hover {

            background: #c9c7c7;

}

.conatiner3 h1 {

            position: relative;

            font-family: "eb-garamond";

            margin-left: 250px;

            margin-top: 30px;

}

#nav2 {

            padding: 0;

            margin: 0;

            z-index: 6000px;

            font-family: "eb-garamond";

            top: 10px;

}

#nav2 body {

            padding: 0;

            font-family: "eb-garamond";

}

#nav2 ul {

            list-style: none;

}

#nav2 ul li {

            float: left;

            padding-right: 1px;

            position: relative;

            z-index: 5000px;

}

#nav2 ul a {

            display: block;

            width: 245px;

            height: 45px;

            text-align: center;

            background: #263b8b;

            color: white;

            font-size: 25px;

            z-index: 6000px;

}

#nav2 ul a:hover {

            background: #00a84e;

}

#footer {

            background-color: #c9c7c7;

            font-family: "eb-garamond";

            margin-top: 55px;

            position: relative;

            width: 100%;

            height: 470px;

            bottom: 0;

}

.container2 {

      max-width: 620px;

            width:100%;

            margin:0 auto;

            position:relative;

            margin-top:58px;

            font-family: "eb-garamond";

}

#contact input [type="text"], #conact input [type="email"], #contact button [type="subscribe now"] {

            font: 400 12px/16px;

            font-family: "eb-garamond";

            align-content: center;

}

#subscribe {

            background: #263b8b;

            padding: 25px;

            margin: 50px 0;

}

#subscribe h2 {

            color: white;

            display: block;

            font-size:30px;

            font-weight: 400;

            text-align:center;

}

#subscribe p {

            margin: 5px 0 15px;

            display: block;

            color: white;

            font-size: 15px;

}

fieldset {

            border: medium none;

            margin: 0 0 10px;

            min-width: 100%;

            padding: 0;

            width: 100%;

}

#subscribe input[type="text"], #subscribe input[type="email"] {

            width: 100%;

            border: 1px solid #263b8b;

            background: white;

            margin: 0 0 5px;

            padding: 10px;

}

#subscribe input[type="text"]:hover, #subscribe input[type="email"]:hover {

            -webkit-transition:border-color 0.3s ease-in-out;

            -moz-transition:border-color 0.3s ease-in-out;

            transition: boder-color 0.3s ease-in-out;

            border:1px solid #c9c7c7;

}

#subscribe button[type="subscribe now"] {

            cursor: pointer;

            width: 100%;

            border: none;

            background: #00a84e;

            color: white;

            margin: 0 0 5px;

            padding: 10px;

            font-size:20px;

}

#subscribe button[type="subscribe now"]:hover {

            background: #c9c7c7;

            -webkit-transition:background 0.3s ease-in-out;

            -moz-transition:background 0.3s ease-in-out;

            transition:background-color 0.3s ease-in-out;

}

#subscribe button[type="subscribe now"]:active {

            box-shadow: insert 0 1px 3px rgba(0,0,0,0.5);

}

#subscribe input:focus {

            outline: 0;

            border: 1px solid ;

}

::-webkit-input-placeholder {

            color: black;

}

:-moz-placeholder {

            color: black;

}

::-moz-placeholder {

            color: black;

}

-ms-input-placeholder {

            color: black;

}

.social {

            display:flex;

            text-align: center;

            position: absolute;

            bottom: 0.%;

            left:75%;

            transform:translate(-50%,-50%);

}

.social h2 {

            font-family: "eb-garamond";

            font-size: 30px;

}

.social li {

            margin: 10px;

            list-style: none;

            font-size: 50px;

            transition: .5s;

}

.social li a {

            width: 60px;

            padding: 16px 0;

}

.social li:nth-child(1) {

            color:#2638B8;

}

.social li:nth-child(2) {

            color:#2638B8;

}

.social li:nth-child(3) {

            color:#2638B8;

}

.social li:nth-child(4) {

            color:#2638B8;

}

.social li:hover {

            transform:translateY(-8px);

            box-shadow: 0 10px 10px rgba(0,0,0,.5);

}

    This topic has been closed for replies.
    Correct answer Nancy OShea

    I think you've been confused by too many unrelated tutorials and not enough focus on just Bootstrap.

    Below is a layout re-build with just Bootstrap.  I threw out your CSS code because it's not helping you.

    CODE:

    !doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter Page</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--BOOTSWATCH SPACELAB THEME CSS-->

    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/spacelab/bootstrap.min.css" rel="stylesheet" integrity="sha384-L/tgI3wSsbb3f/nW9V6Yqlaw3Gj7mpE56LWrhew/c8MIhAYWZ/FNirA64AVkB5pI" crossorigin="anonymous">

    <!--Font Awesome CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>

    /**CUSTOM CSS**/

    body {padding-top: 51px}

    .center-block {float:none}

    .carousel img {width:100%;}

    footer .row {background-color: #446e9b; color:#FFF}

    </style>

    </head>

    <body>

    <!--top navbar and search-->

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header">

    <a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li><a href="#">MENU 1</a></li>

    <li><a href="#">MENU 2</a></li>

    <li><a href="#">MENU 3</a> </li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a></li>

    <!--Site Search -->

    <li class="hidden-sm" style="padding-top:10px">

    <form action="#" method="get" accept-charset="utf-8">

    <div id="custom-search-input">

    <div class="input-group">

    <input name="query" type="text" class="search-query  form-control" placeholder="Site search" required />

    <span class="input-group-btn">

    <button class="btn btn-default" type="submit"> <span class=" glyphicon glyphicon-search"></span> </button>

    </span>

    </div>

    </div>

    </form><!--end Ssarch -->

    </li>

    </ul>

    </div>

    </div>

    </nav><!--end top navbar-->

    <!--begin full-width Bootstrap Carousel-->

    <header class="container-fluid">

    <div class="row">

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

    <!-- Indicators -->

    <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

    <li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

    <div class="item active">

    <img src="https://placeimg.com/1200/400/people" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1200/400/nature" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1200/400/tech" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item">

    <img src="https://placeimg.com/1200/400/arch" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <!--end active-->

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span></a>

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

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span> </a>

    <!--end carousel-->

    </div>

    </div>

    </header>

    <!--BEGIN CONTENT-->

    <section class="container">

    <div class="row">

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    </div>

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    </div>

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    </div>

    <div class="col-sm-6 col-md-3">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    </div>

    </div>

    </section>

    <hr>

    <!--begin full-width footer-->

    <footer class="container-fluid">

    <div class="row">

    <!--begin 3 columns-->

    <div class="col-sm-4 text-center">

    <h3 class="text-warning">Left footer</h3>

    <p>Accusantium sequi deleniti vel nobis aut odio dolorem error vero vitae possimus, laborum non rerum!</p>

    </div>

    <div class="col-sm-4 text-center">

    <h3 class="text-warning">Middle footer</h3>

    <p> Perspiciatis quasi provident, corporis dolore reiciendis non distinctio quo delectus laudantium.</p>

    </div>

    <div class="col-sm-4 text-center">

    <h3 class="text-warning">Right footer</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    </div>

    </div>

    </footer>

    <!--latest jQuery JS-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Latest Bootstrap JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!--font Awesome JS-->

    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

    </body>

    </html>

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 8, 2018

    This is all very confused.  Clearly, you're not  using the Bootstrap 12-box grid system properly for your layout, so why use Bootstrap at all??

    What is this supposed to be?

    <div class="[ col-xs-12 col-sm-offset-2 col-sm-8 ]">

    And why are doing this??

    body {

                width: 1550px;

                height: 6000px;

    }

    Nancy O'Shea— Product User & Community Expert
    A
    aprilv88506003Author
    Participant
    March 8, 2018

    Hi Nancy,

    I had followed tutorials to receive most of the information. The <div class="{col-xs-12-col-sm-offset-2-sm-8]"> was from a tutorial on making event lists. I was not sure what it did or why it was in there but added it just in case. I also did not originally add the body css, I saw on another forum to try that since my footer section overlapped the event list.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 8, 2018

    Can you upload your problem page and assets to a TEST folder on your remote server and post the URL?

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices