I face some issue with css , html and bootstrap - html

Question

I'm beginer. I'm designing a website about furniture. But I face some problem with css and bootstrap. I think they are conflicted.
I want to design a table which contain some contents and pictures. They can lead another page's this website. I tried to do my best but they don't work.maybe my program is not good. sorry for this inconvenience!. Can you tell me how to make table? thanks a million.
#charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial;
background-color: darkgrey;
}
.topnav{
position: relative;
margin: 0 auto;
z-index: 1;
}
.topnav .content{
position: absolute;
top: 0;
background: rgba(0,0,0,0.5);
width: 100%;
color: #f1f1f1;
padding: 20px;
animation-duration: 0s;
}
.topnav a{
float:left;
display: inline-block;
color: white;
text-align: center;
padding: 15px 15px;
text-decoration: none;
font-size: 14px;
margin-left: 150px;
}
.topnav a:hover{
background-color: white;
color: white;
background: rgba(0,0,0,0.5);
}
.topnav .search-container{
float: right;
margin-right: 120px;
}
.topnav input[type=text]{
padding: 6px;
margin-top: 8px;
font-size: 15px;
border: 2px solid ghostwhite;
}
.topnav .search-container button{
float: right;
padding: 6px 10px;
margin-top: 8px;
background-color: white;
border: none;
cursor: pointer;
}
.top .search-container button:hover{
background-color: white;
color: black;
}
#media screen and (max-width: 600px){
.topnav .search-container {
float: none;
}
}
.topnav a, .top input[type=text], .topnav .search-container button {
float: none;
display: inline-block;
text-align: left;
margin: 0px;
padding: 14px;
}
.topnav input[type=text]{
border: 2px solid ghostwhite;
}
.topnav .logo{
float: left;
width: 70px;
height: 45px;
margin-right: 10px;
}
.mySlides {
display: none;
max-width: 100%;
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: 0px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
.text{
color: white;
font-size: 50px;
position: absolute;
text-align: center;
}
.hero-text{
text-align: center;
position:absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
background: rgb(0,0,0,0.3);
background-color: black;
opacity: 0.4;
z-index: 1;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2.69s;
animation-name: fade;
animation-duration: 2.69s;
}
#-webkit-keyframes fade{
from{opacity: 0.5}
to{opacity: 1}
}
#keyframes fade{
from {opacity: 0.5}
to{opacity: 1}
}
#media only screen and (max-width: 320px){
.text {font-size: 30px;}
}
.container {
position: relative;
font-family: Arial;
}
.button{
color: white;
background-color: black;
cursor: pointer;
display: block;
fontsize: 20px;
font-weight: 400;
line-height: 45px;
margin: 2px auto 2em;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
letter-spacing: 0;
box-shadow: 3px 3px 1px;
}
.button:hover,
.button:active {
letter-spacing: 5px;
}
.button:after,
.button:before{
backface-visibility: hidden;
border: 1px solid white;
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.button:hover:after,
.button:hover:before{
backface-visibility: hidden;
border-color: white;
transition: width 350ms ease-in-out;
width: 70%;
}
.button :hover:before{
bottom: auto;
top: 0;
width: 70%;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dropbtn{
font-size: 14px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background: rgba(0,0,0,0.5);
}
.topnav a:hover, .dropdown: hover .dropbtn{
background-color: white;
color: black;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
}
.dropdown: hover .dropdown-content{
display: block;
}
.contain {
position:relative;
width: 50%;
}
.image{
opacity: 1;
display: block;
width: 90%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
margin-top: -30px;
border: 2px solid black;
box-shadow: 3px 3px 1px;
}
.middle{
transition: .5s ease;
opacity: 0.5;
position: absolute;
top: 50%;
left: 33%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.contain:hover .image{
opacity: 0.3;
}
.contain:hover .image{
opacity: 1;
}
.text-con{
background-color: black;
color: white;
font-size: 16px;
padding: 16px 32px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Quality Furnitures</title>
</head>
<body>
<div class="topnav">
<div class="content">
<img class="logo" src="image.css/logo.jpg">
HOME
PRODUCTION
PROJECTS
CONTACTS
<div class="search-container">
<input type="text" placeholder="Search..." name="search">
<buttton type="submit"><i class="fa fa-search"></i></buttton>
</div>
</div>
</div>
<div class="slideshow-container">
<div class="hero-text">
<h3 style="font-size: 60px"><u>Style.Luxury.Design</u></h3>
<br>
<button class="button"><strong>SHOP NOW</strong></button>
<button class="button"><strong>EXPLORE NOW</strong></button>
</div>
<div class="mySlides fade">
<div class="container">
<img src="image.css/161122_14_59_10_5DS_7049.0.jpg" style="width:100%; height:70%">
</div>
</div>
<div class="mySlides fade">
<div class="container">
<img src="image.css/top-interior-design-furniture-stores-home-decoration-ideas-designing-luxury-at-interior-design-furniture-stores-interior-design-ideas.jpg" style="width:100%; height:70%">
</div>
</div>
<div class="mySlides fade">
<div class="container">
<img src="image.css/luxury-furnature-stores-with-top-online-furniture-stores.jpg" style="width:100%; height: 70%">
</div>
</div>
</div>
<script>
var slideIndex;
function showSlides(){
var i;
var slides=document.getElementsByClassName("mySlides");
for (i=0; i<slides.length; i++){
slides[i].style.display ="none";
}
slides[slideIndex].style.display ="block";
slideIndex++;
if (slideIndex > slides.length -1){
slideIndex = 0;
}
setTimeout(showSlides, 5000);
}
showSlides(slideIndex =0);
function currentSlide(n){
showSlides(slideIndex = n);
}
</script>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<div class="contain">
<img src="image.css/22staged1-master768.jpg" style="width:90%" class="image">
<br>
<div class="middle">
<div class="text-con">
<h2>Living Room</h2>
<br>
<button class="button">SEE MORE</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="contain">
<img src="image.css/eva_br.jpg" style="width:90%" class="image">
<div class="middle">
<div class="text-con">
<h2>BedRoom</h2>
<br>
<button class="button">SEE MORE</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumnail">
<div class="contain">
<img src="image.css/bathroom.jpg" style="width: 90%" class="image">
<div class="middle">
<div class="text-con">
<h2>BathRoom</h2>
<br>
<button class="button">SEE MORE</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

You just need to change the order in which you are loading your stylesheets. Currently you are loading them in this order
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
You need to have your own styles come after the bootstrap style sheet
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style1.css">
This is the cascade aspect of CSS (the 'C'). Your rules are currently being overwritten by bootstrap default rules and that is why you are having some conflicts. To better understand you can take a look here https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance