Cascading Style Sheets

On Firefox HTML input overflows on the right in a CSS grid

My CSS grid has the following stylesheet :

<span id="declaration" class="declaration" style="grid-template-columns: 80px 10px 150px; grid-template-rows: 10px 10px 20px;">
.declaration {
    display: grid;
    margin-top: 20px;
    grid-column-gap: 5px;
}

The leftmost element of the grid has the following stylesheet :

<input type="text" id="etiquette" class="etiquette" title="label" style="grid-column: 1 / auto; display: initial;">
.etiquette {
    grid-row: 1 / span 2;
    margin-left: 5px;
    margin-right: 10px;
}

I need an expert on CSS&HTML

Please don't say I should have multi line indented coding. My text editor allows deleting & copying a line very easily.

I have narrowed down my problem to the following;

/*1*/<style type="text/css"> .in { position: fixed; width: 100%; left:70%; top: 26%; } </style>
/*2*/<style type="text/css"> .sh { position: fixed; width: 100%; left: 40%; top: 26%; } </style>
 
/*3*/
 
/*4*/<div class="in"> <select name="inout" style="width: 10%; height: 5mm"; >
/*5*/<option value="">Select</option>
/*6*/<option  value="in">In</option>
/*7*/<option  value="out">Out</option>

CSS alignment issue. IE only

My website developed by the Bootstrap4, but the page is confusing on IE, is there any way to solve this problem quickly?

https://succulentsaddiction.com/soil-mix/

Does hiding content using CSS will affect the site ranking?

In my website using the CSS properties like display: none and visibility: hidden - I hidden links and text on the website, but suggest that it will harm the website SEO factors. I was wondering is there any other ways to hide content on the website without CSS.

Basic CSS question

Hello

I just started playing around with CSS and have looked at resources online, but have problems with some basics, like nested selectors:

Example:

CSS:

a {color: black;}
.classA {color: red;}
.classA a {color: blue;}
.classA .classA2 {color: green;]
.classA .classA2 h1 {color: light green;]
.classA .classA2 a {color: dark green;]
.classB {color: yellow;}
.classA .classB h1 {color: magenta;}
.classA a, .classB h1, .classC span {color: magenta;}

HTML:

<a class="classA" href="">Link 1 </a>
<a class="classA classB" href="">Link 2 </a>

Syndicate content